CSS属性
CSS 动画属性(animation)
| 属性 | 描述 | CSS | |-----|-----|-----| | @keyframes | 定义一个动画,@keyframes定义的动画名称用来被,animation-name所使用。 | 3 | | animation | 复合属性。检索或设置对象所应用的动画特效。 | 3 | | animation-name | 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 | 3 | | animation-duration | 检索或设置对象动画的持续时间 | 3 | | animation-timing-function | 检索或设置对象动画的过渡类型 | 3 | | animation-delay | 检索或设置对象动画的延迟时间 | 3 | | animation-iteration-count | 检索或设置对象动画的循环次数 | 3 | | animation-direction | 检索或设置对象动画在循环中是否反向运动 | 3 | | animation-play-state | 检索或设置对象动画的状态 | 3 | ## @keyframes 规则 - 使用@keyframes规则,你可以创建动画。 - 创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,您可以更改CSS样式的设定多次。 - 指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。0%是开头动画,100%是当动画完成。 - 为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。 - 语法:@keyframes animationname {keyframes-selector {css-styles;}} - 值 - animationname:必需的。定义animation的名称。 - keyframes-selector:必需的。动画持续时间的百分比。 - 合法值: 0-100%、 from (和0%相同)、 to (和100%相同) - 注意: 您可以用一个动画keyframes-selectors。 - css-styles:必需的。一个或多个合法的CSS样式属性 - 实例 ```css @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;} } @-webkit-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;} } ``` ## animation(动画) 属性 - 语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state; - 值 - animation-name:指定要绑定到选择器的关键帧的名称 - animation-duration:动画指定需要多少秒或毫秒完成 - animation-timing-function:设置动画将如何完成一个周期 - animation-delay:设置动画在启动前的延迟间隔。 - animation-iteration-count:定义动画的播放次数。 - animation-direction:指定是否应该轮流反向播放动画。 - animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 - animation-play-state:指定动画是否正在运行或已暂停。 - initial:设置属性为其默认值。 - inherit:从父元素继承属性。 - 实例 ```css div{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } ``` ## animation-name 属性 - 语法:animation-name: keyframename|none; - 值 - keyframename:指定要绑定到选择器的关键帧的名称 - none:指定有没有动画(可用于覆盖从级联的动画) - 实例 ```css animation-name:mymove; -webkit-animation-name:mymove; /* Safari 和 Chrome */ ``` ## animation-duration 属性 - 语法:animation-duration: time; - 值 - time:指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。 - 实例 ```css animation-duration:2s; -webkit-animation-duration:2s; /* Safari 和 Chrome */ ``` ## animation-timing-function 属性 - 语法:animation-timing-function: value; - 值 - linear 动画从头到尾的速度是相同的。 - ease 默认。动画以低速开始,然后加快,在结束前变慢。 - ease-in 动画以低速开始。 - ease-out 动画以低速结束。 - ease-in-out 动画以低速开始和结束。 - steps(int,start|end):指定了时间函数中的间隔数量(步长)。有两个参数,第一个参数指定函数的间隔数,该参数是一个正整数(大于 0)。 第二个参数是可选的,表示动画是从时间段的开头连续还是末尾连续。含义分别如下:start:表示直接开始;end:默认值,表示戛然而止。 - cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 - 实例 ```css /* Chrome, Safari 和 Opera */ #div1 {-webkit-animation-timing-function: linear;} #div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);} /* 标准语法 */ #div1 {animation-timing-function: linear;} #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);} ``` ## animation-delay 属性 - 语法:animation-delay: time; - 值 - time:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0 - 实例 ```css animation-delay: -2s /* Opera */ -moz-animation-delay: -2s /* Firefox */ -webkit-animation-delay: -2s /* Safari 和 Chrome */ ``` ## animation-iteration-count 属性 - 语法:animation-iteration-count: value; - 值 - n:一个数字,定义应该播放多少次动画 - infinite:指定动画应该播放无限次(永远) - 实例 ```css animation-iteration-count:3; -webkit-animation-iteration-count:3; /*Safari and Chrome*/ ``` ## animation-direction 属性 - 语法:animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; - 值 - normal:默认值。动画按正常播放。 - reverse:动画反向播放。 - alternate:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 - alternate-reverse:动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 - initial:设置该属性为它的默认值。 - inherit:从父元素继承该属性。 - 实例 ```css animation-direction:alternate; -webkit-animation-direction:alternate; /* Safari 和 Chrome */ ``` ## animation-play-state 属性 - 语法:animation-play-state: paused|running; - 值 - paused:指定暂停动画 - running:指定正在运行的动画 - 实例 ```css animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ ```
顶部
收展
底部
[TOC]
目录
CSS 动画属性(animation)
CSS 背景属性(background)
CSS 边框和轮廓属性
CSS 列表属性(List)
CSS 尺寸属性(size)
CSS 字体属性(font)
CSS 定位属性(Positioning)
CSS 盒子模型
CSS 文本属性(Text)
CSS 表格属性(Table)
CSS 过渡属性(Transition)
CSS 2D/3D 转换属性
CSS 内容生成属性
CSS 颜色属性(Color)
CSS 网格属性(Grid)
CSS 超链接属性
CSS 多列属性(Multi-column)
CSS 页面媒体属性
CSS 分页属性
CSS 用户外观属性
相关推荐
CSS教程
CSS进阶