Márgenes animados de CSS3

Intentando animar en los márgenes de CSS3. Lo que este sitio parece decir que puede, pero no funciona para mí.

Aquí hay un jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Haga clic en una sección para ver la animación alternar).

Aquí está mi CSS:

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

De hecho, tengo 3 animaciones. 1 para un fadeIn inicial simple en carga inicial, luego los 2 otros para la animación de margin al hacer clic. También probé el margin lugar de la parte superior e inferior, pero todavía no hay señales de que funcione.

No necesita fotogtwigs clave para esto: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

 transition: margin 700ms; 

Debe agregar la propiedad de transición al elemento base que desea animar.

También mencionaste que querías cambiar la opacidad, pero no veo cómo es posible teniendo en cuenta que solo tienes un único elemento sin hijos. Quiero decir: no puedes hacer clic en el elemento si está oculto.

Lo que puedes hacer, sin embargo, es agregar opacidad a todo: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

O incluso más bonito, con una transformación:

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); } 

Por comentario, desea desvanecerse en los elementos en la carga de la página. Podemos hacer eso agregando una clase init .

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

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

Con fotogtwigs clave: 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; 

Para crear animaciones con CSS3, debes:

1 – Crea una clase con atributo de animación, para trabajar en algunos navegadores necesitas poner prefijos: -webkit-, -o-, -moz-. 2 – Crear fotogtwigs clave de animación

mira el ejemplo:

 .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 } }