最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。
css3 animation mainly includes Transform, Transition, and Animation.
the difference
- Transition: Allow CSS attribute values to transition smoothly within a certain time interval. Need to trigger an event (hover event or click event) to change its css properties over time.
- Animation: without triggering any time, it can also change the attribute value of the element css displayly with time to achieve the animation effect
animation
Attributes
1. animation-name: used to define the name of an animation, the name here must be the same as the name of @keyframes
2. animation-duration: specify the duration of the element to play the animation, the unit is: s, the default value is: 0
3. Animation-timing-function: How to play animation
- ease: (gradually slower) default value, ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
- linear: (uniform speed), the linear function is equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
- ease-in: (Acceleration), the ease-in function is equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
- ease-out: (deceleration), the ease-out function is equivalent to Bezier curve (0, 0, 0.58, 1.0)
4. Animation-delay: Specify the start time of the element animation, that is, how long to start the animation effect after changing the element attribute value. The unit is: s, the default is: 0
5. animation-iteration-count: specifies the number of loops for the element to play animation, the default is: 1, infinite: loops infinitely
6. animation-direction: specifies the direction of the element animation. The default value is: normal, each loop of the animation is played forward; another value is: alternate, the animation is played forward at the even number of times, and the animation is played in the opposite direction at the odd number of times.
7, animation-play-state: control the playback state of the element animation. Two values: running and paused, where running is the default value.
keyframes
Key frames, which divide the animation in the specified time period more finely
@keyframes animationname {
keyframes-selector {
css-styles;
}
}- .animationname: Declares the name of the animation.
- keyframes-selector: used to divide the duration of the animation, you can use the form of percentage, or the form of "from" and "to". The forms of "from" and "to" are equivalent to 0% and 100%.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {
top:0px; left:0px; background:red;}
25% {
top:0px; left:100px; background:blue;}
50% {
top:100px; left:100px; background:yellow;}
75% {
top:100px; left:0px; background:green;}
100% {
top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Since keyframes are difficult to understand, a case in w3school is used to analyze the @keyframes rule . The specific effect can be viewed by clicking the link.
Keyframes are similar to flash. The percentage of each time is the same as every frame in flash. However, flash requires an animation effect comparison of every frame and frame, and keyframes change over time to change the attribute value of element css. The percentage refers to What percentage of the animation time changes.
In this case: animation:mymove 5s infinite;the animation name is set to mymove, the duration is 5s, and it loops endlessly.
The percentages in keyframes (0%, 25%, 50%, 75%, 100%) correspond to (0s, 1.25s, 2.5s, 3.75s, 5s)
- When the execution reaches 0s, top:0px; left:0px; background:red;
- When the execution reaches 1.25s, top:0px; left:100px; background:blue;
- When the execution reaches 2.5s, top: 100px; left: 100px; background: yellow;
- When the execution reaches 3.75s, top: 100px; left:0px; background: green;
- When the execution reaches 5s, top:0px; left:0px; background:red;
During the entire animation process, the back of the animation will overwrite the previous property value. After the animation ends, the style will return to the default effect. In each percentage of css style, there will be an animation gradient process, so that the element can achieve a constantly changing effect.