Home > Developer > Web Develop
If you want to figure it out, stop studying smattering and lose the most.
CSS3 AnimationCSS3 Meaning:
With CSS3, we are able to create animations that can replace animated images, Flash animations, and JavaScript in many Web pages.
Key knowledge
CSS3 @keyframes RulesTo create animations in CSS3, you need to learn @keyframes rules.
@keyframes rules are used to create animations. By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style.
CSS3 Animation PropertiesThe following table lists @keyframes rules and all animation properties:
Property
Describe
Css
@keyframes
Specifies the animation.
3
Animation
The shorthand properties for all animated properties, except for the Animation-play-state property.
3
Animation-name
Specifies the name of the @keyframes animation.
3
Animation-duration
Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.
3
Animation-timing-function
Specifies the speed curve of the animation. The default is "ease".
3
Animation-delay
Specifies when the animation starts. The default is 0.
3
Animation-iteration-count
Specifies the number of times the animation is played. The default is 1.
3
Animation-direction
Specifies whether the animation will play backwards in the next cycle. The default is "normal".
3
Animation-play-state
Specifies whether the animation is running or paused. The default is "running".
3
Animation-fill-mode
Specifies the state outside the object's animation time.
3
Reference: http://www.w3school.com.cn/css3/css3_animation.asp
Homework:
@keyframes myfirst{from {background:red;} to {Background:yellow;}}, a variety of color changes
@keyframes myfirst{0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;}}2. Achieve color and position changes
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}3. Repeat
ANIMATION-ITERATION-COUNT specifies the number of times the animation is played
Animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari and Chrome */
Set a number that is large enough.
Shorthand one parameter
Animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s; animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;
animation:myfirst 5s linear 2s infinite alternate; /* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */-webkit-animation:myfirst 5s Linear 2s infinite alternate;/* Opera: */-o-animation:myfirst 5s linear 2s infinite alternate;
Practical application:
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no ">
<meta name= "format-detection" content= "Telephone=no"/>
<style type= "Text/css" >
@keyframes Passdown {
0% {
bottom:5px;
}
50% {
bottom:12px;
}
100% {
bottom:5px;
}
}
@-webkit-keyframes Passdown {
0% {
bottom:5px;
}
50% {
bottom:12px;
}
100% {
bottom:5px;
}
}
. one-slide-8 {
Opacity:1;
Transition:all 0.1s ease-in 5.1s;
-webkit-transition:all 0.1s ease-in 5.1s;
}
. pub-passdown {
Position:absolute;
width:18px;
height:16px;
left:50%;
Margin-left: -9px;
bottom:10px;
/*transition:all 1s ease-in 20s;*/
Animation-name:passdown;
Animation-timing-function:ease;
animation-duration:0.8s;
Animation-iteration-count:infinite;
/*-webkit-transition:all 1s ease-in 20s;*/
-webkit-animation-name:passdown;
-webkit-animation-timing-function:ease;
-webkit-animation-duration:0.8s;
-webkit-animation-iteration-count:infinite;
}
</style>
<body style= "Background-color: #000000" >
<div class= "One-slide-8 pub-passdown" >
</div>
</body>CSS animation effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
