Can I apply animation to fields?

Question

I'm trying to animate CSS3 fields, which this site apparently says, but I can't work.

I actually have 3 animations. 1 for a simple initial fadeIn at boot, then 2 others for animating the margin on click. I also just tried margin instead of top and bottom, but there was still no sign that this was working.

Click on a section to see the switching animation.

 $(".section").click(function() { $(this).toggleClass("open"); }); 

 body{ background: #f1f1f1; } .section{ display: block; background: #fff; border-bottom: 1px solid #f1f1f1; animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease; } .section.open { margin: 20px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="wrapper"> <div class="section">Some content</div> <div class="section">Some content</div> <div class="section">Some content</div> <div class="section">Some content</div> <div class="section">Some content</div> <div class="section">Some content</div> <div class="section">Some content</div> </div> 

Here is the JSFiddle: http://jsfiddle.net/ybh0thp9/3/

Answer 1

You do not need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

 transition: margin 700ms; 

You need to add the transition property to the base element that you want to animate.

You also mentioned that you want to change the opacity, but I don’t see how this is possible, given that you have only one element without children. I mean: you cannot click on an element if it is hidden.

However, you can add opacity to everything: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Or even prettier, with the conversion:

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

---

In one comment, you want to fade in page load elements. We can do this by adding the init class.

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

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

---

With keyframes: 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

To create animations with CSS3 you need:

1. Create a class with an animation attribute; to work in some browsers you need to put the prefixes: -webkit- , -o- , -moz- .
2. Create keyframe animations

look at an example:

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

Answer 3

Make sure you do not set two transitions for different properties, like this:

 transition: margin 1000ms ease-in-out; transition: box-shadow 1000ms ease-in-out; 

box-shadow will be animated, but margin completely ignored.

This will be obvious in your browser debugging tools, because it will look like this:

The right way:

 transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;