3D animations (CSS3) -animation
CSS3 animation feature is one subversive, can be accurately controlled, or a group of a movie, a plurality of common nodes is achieved by providing a complicated animation;
via CSS3, we can create an animation, which can be substituted in a number of pages
animated image, Flash animation and JavaScript.
The first is called the transition (transition) animation, is the transition from the initial state
to the end state of this process generated animation. It refers to the so-called state
size, position, color, deformation (Transform), etc. These attributes. CCS through
the transition can only be defined first and tailed the two states, it is the simplest kind of animation
.
The second is called keyframes (keyframes) animation. It is different from the first
transition and last animation defined only two states, keyframe animation can define multiple
states, or is the case with the key frame, the first transition animations can define
a frame and a last two keyframes and the key frame animation, you can define any
meaning many key frames, which can achieve a more complex animation.
By @keyframes rules, you can create animation.
Creating animation principle is that CCS will be a gradual change in style is another set of sample
type. During animation, you can change many times this CSS styles.
A predetermined percentage change in time of occurrence, either by keyword "from
" and "to", and is equivalent to 100% 0% 0.01% is the start time of the animation, 100% of the
end time of the animation. For optimal browser support, you should start
the final definition of the 0% and 100% of the selector. ,
When creating animation @keyframes Please binds it to a selector
, it would not animate.
By specifying at least the following two properties CSS3 animation, the animation can be bound to a
selector; animation predetermined names; when a predetermined length of the animation.
Syntax:
@keyframes animationname
{
keyframes Selector {-CSS-Styles;}
}
Description:
animationname: declared name of the animation;
keyframes-Selector: to divide the length of the animation, can be used one hundred
points over the form, "from" and may also be used the form of the "to".
"From" and "to" form equivalent to 0% and 100%.
Always use the recommended percentage.
Syntax:
Animation-Timing-function: value;
Description:
Animation Animation-Timing-predetermined speed profile function;
Linear: the speed of the animation is the same from start to finish.
ease: default. Animation start at low speed, then speed up, slow down before the end of
ease-in: Animation start at low speed.
ease-out: Animation at low end.
ease-in-out: animation start and end at a low speed.
cubic-bezier (n, n, n, n): value of the cubic-bezier fill function, possible
values are values from 0 to 1.
Syntax:
Animation-the Iteration-COUNT: the n-| Infinite;
Description:
Animation-the Iteration-COUNT attribute defines the number of times the animation playback.
n: number of values defined animation.
infinite: infinite provisions animation should play.
Syntax:
Animation-Play-State: paused | running;
Description:
Animation-Play-State attribute specifies the animation is running or paused.
NOTE: You can use this property in JavaScript, so you can playback
pause the animation process.
He paused: the provisions of animation has been suspended.
running: the provisions of the animation is playing.
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: green;
animation: anim-test 4s;
}
@keyframes anim-test {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(200px,0,0);
}
50% {
transform: translate3d(200px,200px,0);
}
75% {
transform: translate3d(0px,200px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>effect: