CSS动画animation CSS动画|CSS2

本文概述

CSS3 @keyframes规则
动画做什么
CSS动画的工作原理
CSS动画属性
CSS动画示例：更改背景颜色
CSS动画示例：移动矩形

CSS Animation属性用于在网页上创建动画。它可以替代Flash和JavaScript创建的动画。

CSS3 @keyframes规则动画是在@keyframe规则中创建的。它用于控制CSS动画序列中的中间步骤。
动画做什么动画使元素逐渐从一种样式变为另一种样式。你可以添加要添加的属性。你还可以指定百分比变化。0％指定动画的开始, 而100％指定动画的完成。
CSS动画的工作原理在@keyframe规则中创建动画时, 它必须与选择器绑定；否则动画将无效。
可以通过至少指定以下两个属性将动画绑定到选择器：

动画名称
动画的持续时间

CSS动画属性

属性	描述
@keyframes	用于指定动画。
animation	这是一种简写属性, 用于设置除animation-play-state和animation-fill-mode属性之外的所有属性。
animation-delay	它指定动画何时开始。
animation-direction	它指定动画是否应在备用周期中保留播放。
animation-duration	它指定动画完成一个周期所花费的时间。
animation-fill-mode	它指定元素的静态样式。（当动画不播放时）
animation-iteration-count	它指定应播放动画的次数。
animation-play-state	它指定动画是运行还是暂停。
animation-name	它指定@keyframes动画的名称。
animation-timing-function	它指定动画的速度曲线。

CSS动画示例：更改背景颜色让我们看一个简单的CSS动画示例, 该示例将矩形的背景颜色从RED更改为BLACK。

< !DOCTYPE html> < html> < head> < style> div { width: 100px; height: 100px; background: red; -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */ animation: myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {background: red; } to {background: green; } } /* Standard syntax */ @keyframes myfirst { from {background: red; } to {background: green; } } < /style> < /head> < body> < p> < b> Note:< /b> The IE 9 and earlier versions don't support CSS3 animation property. < /p> < div> < /div> < /body> < /html>

CSS动画示例：移动矩形【CSS动画animation】让我们再举一个例子来显示带有百分比值的动画。

< !DOCTYPE html> < html> < head> < style> div { width: 100px; height: 100px; background: red; position: relative; -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ animation: myfirst 5s; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { 0%{background:red; left:0px; top:0px; } 25%{background:yellow; left:300px; top:0px; } 50%{background:blue; left:200px; top:300px; } 75%{background:green; left:0px; top:200px; } 100% {background:red; left:0px; top:0px; } } /* Standard syntax */ @keyframes myfirst { 0%{background:red; left:0px; top:0px; } 25%{background:yellow; left:300px; top:0px; } 50%{background:blue; left:300px; top:200px; } 75%{background:green; left:0px; top:200px; } 100% {background:red; left:0px; top:0px; } } < /style> < /head> < body> < p> < b> Note:< /b> The Internet Explorer 9 and its earlier versions don't support this example.< /p> < div> < /div> < /body> < /html>