CSS3 анимировать поля

Question

Пытается анимировать в поля CSS3. Кажется, что this site может сказать, но это не работает для меня.

Вот jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Нажмите на раздел, чтобы просмотреть анимацию).

Вот мой CSS:

.section{ 
    display: block; 
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease; 
} 
.section.open { 
      margin: 20px 0; 
} 

Я на самом деле есть 3 анимации. 1 для простого начального fadeIn при начальной загрузке, затем 2 других для анимации при щелчке. Я также попробовал margin вместо верхнего и нижнего, но все равно никаких признаков его работы.

Answer 1

Вам не нужны ключевые кадры для этого: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms; 

Вам нужно добавить свойство перехода к базовому элементу, который вы хотите анимировать.

Вы также упомянули, что хотите изменить непрозрачность, но я не понимаю, как это возможно, учитывая, что у вас есть только один элемент без детей. Я имею в виду: вы не можете нажимать на элемент, если он скрыт.

Что вы можете сделать, хотя, добавить непрозрачность всей вещи: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Или даже красивее, с трансформацией:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section { 
    margin: 0; 
    opacity: 0.7; 
    transform: scale(0.85); 
    transition: all 700ms; 
} 
.section.open { 
    margin: 20px 0; 
    opacity: 1; 
    transform: scale(1); 
} 

---

За комментарий, вы хотите затухать в элементах загрузки страницы. Мы можем сделать это, добавив класс init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS 
.section.init {opacity: 1;} // CSS 

---

с ключевыми кадрами: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } } 

-webkit-animation: fadeIn 1.5s ease;  
-moz-animation: fadeIn 1.5s ease; 
animation: fadeIn 1.5s ease; 

Answer 2

для создания анимации ведьм CSS3 вам нужно:

1 - Создайте класс с анимацией atribute, чтобы работать в некоторых браузерах вам нужно поставить префиксы: -webkit-, -o-, -moz-. 2 - Создание анимации ключевые кадры

смотри пример:

.animate{ 
    animation: myAnimation 10s; 
    animation-direction: alternate; 
    animation-play-state: running; 
    animation-iteration-count: infinite; 
    animation-delay: 0; 
    animation-timing-function: 1; 
    animation-direction: alternate; 

    -webkit-animation: myAnimation 10s; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-play-state: running; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 0; 
    -webkit-animation-timing-function: 1; 
    -webkit-animation-direction: alternate; 

    -moz-animation: myAnimation 10s; 
    -moz-animation-direction: alternate; 
    -moz-animation-play-state: running; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-delay: 0; 
    -moz-animation-timing-function: 1; 
    -moz-animation-direction: alternate; 

    -o-animation: myAnimation 10s; 
    -o-animation-direction: alternate; 
    -o-animation-play-state: running; 
    -o-animation-iteration-count: infinite; 
    -o-animation-delay: 0; 
    -o-animation-timing-function: 1; 
    -o-animation-direction: alternate; 
} 

    @keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 50px} 
     25%  { margin-top: 100px; margin-left: 50px } 
     50%  { margin-top: 0; margin-left: 50px } 
     75%  { margin-top: 100px; margin-left: 50px } 
     100% { margin-top: 0; margin-left: 50px } 
    } 
    @-webkit-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    } 
    @-moz-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    } 
    @-o-keyframes myAnimation { 
     0%  { margin-top: 0; margin-left: 100px} 
     25%  { margin-top: 100px; margin-left: 100px } 
     50%  { margin-top: 0; margin-left: 100px } 
     75%  { margin-top: 100px; margin-left: 100px } 
     100% { margin-top: 0; margin-left: 100px } 
    }