Css3动画简介 | 幽幽过客

使用@keyframes 动画名创建一个动画

语法:

@keyframes animationname {

step {css-styles;}

}

值	描述
animationname	必需。定义动画的名称。
step	必需。动画时长的百分比,可以有多个。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

下面来创建一个改变颜色的动画案例

<style>

.box{

width: 100px;

height: 100px;

border: 1px solid gray;

background-color: aqua;

margin: 0px auto;

position: relative;

align-self: center;

-webkit-animation: moveBox 3s linear ;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes moveBox

{

0% {background-color: chartreuse;top:0px;left: 0px;}

25% {background-color:red;top: 0px;left:200px;}

50% {background-color:greenyellow;top:200px;left:200px;}

75% {background-color:skyblue;top:200px;left:0px;}

100%{background-color:black;top:0px;left:0px;}

}

</style>

___________________________________________________________________________________________________________

使用animation绑定一个动画:

animation为下列属性的缩写

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

animation-timing-function 的有效值

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

注意兼容性写法

火狐浏览器:@-moz-keyframes

谷歌浏览器:@-webkit-keyframes