CSS3 Animations
来源:互联网 发布:凤凰卫视网络电视直播 编辑:程序博客网 时间:2024/06/16 05:25
CSS3 Animations
With CSS3, we can create animations, which can replace animatedimages, Flash animations, and JavaScripts in many web pages.
Animation
CSS3 @keyframes Rule
To create animations in CSS3, you will have to learn about the@keyframes rule.
The @keyframes rule is where the animation is created. Specify aCSS style inside the @keyframes rule and the animation willgradually change from the current style to the new style.
Browser Support
Internet Explorer does not yet support the @keyframes rule or theanimation property.
Firefox requires the prefix -moz-, Chrome and Safari require theprefix -webkit-, and Opera require the prefix -o-.
Example
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
CSS3 animation
When the animation is created in the @keyframe, bind it to aselector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these twoCSS3 animation properties:
- Specify the name of the animation
- Specify the duration of the animation
Example
Binding the "myfirst" animation to a div element, duration: 5seconds:
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
}
Try it yourself »
Note:
What are Animations in CSS3?
An animation is an effect that lets an element gradually changefrom one style to another.
You can change as many styles you want, as many times you want.
Specify when the change will happen in percent, or the keywords"from" and "to", which is the same as 0% and 100%.
0% is the beginning of the animation, 100% is when the animation iscomplete.
For best browser support, you should always define both the 0% andthe 100% selectors.
Example
Change the background color when the animation is 25%, 50%, andagain when the animation is 100% complete:
{
0%
25%
50%
100% {background: green;}
}
@-moz-keyframes myfirst
{
0%
25%
50%
100% {background: green;}
}
@-webkit-keyframes myfirst
{
0%
25%
50%
100% {background: green;}
}
@-o-keyframes myfirst
{
0%
25%
50%
100% {background: green;}
}
Try it yourself »
Example
Change the background color and position:
{
0%
25%
50%
75%
100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst
{
0%
25%
50%
75%
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst
{
0%
25%
50%
75%
100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst
{
0%
25%
50%
75%
100% {background: red; left:0px; top:0px;}
}
Try it yourself »
CSS3 Animation Properties
The following table lists the @keyframes rule and all the animationproperties:
The two examples below sets all the animation properties:
Example
Run an animation called myfirst, with all the animationproperties set:
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
Try it yourself »
Example
The same animation as above, using the shorthand animationproperty:
{
animation: myfirst 5s linear 2s infinite alternate;
-moz-animation: myfirst 5s linear 2s infinite alternate;
-webkit-animation: myfirst 5s linear 2s infinite alternate;
-o-animation: myfirst 5s linear 2s infinite alternate;
}
Try it yourself »
- CSS3 Animations
- CSS3动画属性-Animations
- CSS3动画之二:Animations功能
- 10 CSS3 and jQuery Loading Animations Solutions
- Animations
- Animations
- Animations
- Animations
- Animations
- css3 的艰难
- [译]CSS3的关键帧动画(Keyframe Animations)简介
- CSS3中的动画功能之transtions和animations详解
- CSS3中的动画功能-transition功能与animations功能
- css3 属性 transition
- [转]Css3: animation
- CSS3-阴影 效果
- CSS3 box-shadow Property
- CSS3 background-size Property
- CSS3 text-shadow Property
- CSS3 word-wrap Property
- OpenCV IplImage和GDI+ Bitmap的相互转换
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS3 Animations
- ThinkPHP3.1快速入门(13)自动完…
- event keycode大全
- ThinkPHP中结果唯一性的作法
- javascript函数设置默认值
- JQuery获取浏览器窗口的可视区域高…
- Sphinx 在 windows 下安装使用
- Mysql:bit类型的查询与插入
- ubuntu apt-get 安装的程序