CODEWITHSUNDEEP
htmlcss
Ellis
Ellis

Reputation: 121

some CSS3 animations explain

i've have been searching the web for the css3 animations'deifnitions in its concept.

i downloaded some example from the net and i dont know what happen using this line of codes. 

#slider li.firstanimation {
-moz-animation:cycleone 25s linear infinite;    
-webkit-animation:cycleone 25s linear infinite;     
}

and this...

@-webkit-keyframes cycleone {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

can someone explain the lines(codes) especially the "@" thing.

Upvotes: 0

Views: 45

Answers (1)

CatalinBerta
CatalinBerta

Reputation: 1724

CSS3 animations are keyframe-based. In order to create an animation, you have to create a set of CSS rules and wrap them in a keyframe identifier @keyframes hello { rules here } and apply them to any dom element you want.

When you attach an animation to an element, you also give it a duration, of let's say 10 seconds. In these 10 seconds you can decide when each rule is initiated. For example,

@keyframes fade {

0% {
 opacity: 1;
}
50% {
 opacity: 0;
}
100% {
 opacity: 1;
}

}

If you were to use that animation on an element for 10 seconds, like so:

.myElement {
   animation: fade 10s 1
}

Then it would start to fade to 0 in 5 seconds because the rule is at halfway 50% and then back in another 5 seconds to 1, 10 seconds in total.

This is animations at a glance, if you understood the basic concept, it's time for you to start documenting yourself more specifically about it, as there is much to learn and too much to explain on stackoverflow :) Enjoy

Upvotes: 1

Related Questions