CSS动画效果(animation属性)解析 |
您所在的位置:网站首页 › css动画循环播放属性 › CSS动画效果(animation属性)解析 |
CSS动画效果(animation属性)解析
动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性基础练习总结
动画与变形和过渡的区别
在CSS3中, 过渡 和 变形 只能设置元素的变换过程,并不能对过程中的某一环节进行精确控制,例如 过渡 和 变形 实现的动态效果不能够重复播放。为了实现更加丰富的动画效果,CSS3提供了 animation属性 ,使用 animation属性 可以定义复杂的动画效果。 @keyframes在CSS3中,@keyframes规则用于创建动画。 基本语法格式: @keyframes animationname { keyframes-selector{css-styles;} } animationname :表示 当前动画的名称 ,它将作为引用时的 唯一标识 ,因此不能为空。 keyframes-selector : 关键帧 选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个 百分比、 from 或者 to 。其中, from和0% 效果相同表示动画的开始, to和100% 效果相同表示动画的结束。 css-styles :定义执行到当前 关键帧 时对应的 动画状态 ,由 CSS样式属性 进行定义,多个属性之间用 分号 分隔,不能为空。 animation-name属性animation-name属性 用于定义要应用的 动画名称 。 基本语法格式: animation-name: keyframename | none; animation-name 属性 初始值为 none ,适用于所有 块元素 和 行内元素 。 keyframename 参数用于规定需要绑定到 选择器 的keyframe的 名称 ,如果值为 none ,则表示不应用任何动画,通常用于覆盖或者取消动画。 animation-duration属性animation-duration属性用于定义整个动画效果完成所需要的 时间,以 秒或毫秒计。 基本语法格式: animation-duration: time; animation-duration 属性 初始值为 0,适用于所有 块元素和行内元素 。time参数是以秒(s)或者毫秒(ms)为单位的时间,默认值为0,表示没有任何 动画效果 。当值为负数时,则被视为0。 animation-timing-function属性animation-timing-function 用来规定动画的 速度曲线 ,可以定义使用哪种方式来执行动画效果。 基本语法格式: animation-timing-function:value; animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。 animation-timing-function的常用属性值如下: 属性值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始,然后加快,在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1的数值。 animation-delay属性animation-delay属性用于定义执行动画效果之前 延迟的时间,即规定动画什么时候开始。 基本语法格式: animation-delay:time; 参数 time 用于定义动画开始前等待的时间,其单位是秒或者毫秒,默认属性值为0。 animation-delay属性 适用于所有的 块元素 和 行内元素 。 animation-iteration-count属性animation-iteration-count属性用于定义动画的 播放次数 基本语法格式: animation-iteration-count: number | infinite; animation-iteration-count属性 初始值为 1 ,适用于所有的 块元素和行内元素 。如果属性值为 number ,则用于定义播放动画的 次数 ;如果是 infinite ,则指定动画 循环播放 。 animation-direction属性animation-direction属性 定义当前动画播放的方向,即动画播放完成后是否 逆向交替循环 。 基本语法格式: animation-direction: normal | alternate; animation-direction 属性 初始值为normal,适用于所有的 块元素和行内元素 。该属性包括两个值,默认值normal表示动画每次都会正常显示。如果属性值是 “alternate” ,则动画会在 奇数次数 (1、3、5 等等)正常播放,而在 偶数次数 (2、4、6 等) 逆向播放 。 animation属性animation属性 也是一个简写属性,用于综合设置以上六个动画属性。(用空格隔开) 基本语法格式: animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; 使用 animation属性 时必须指定 animation-name 和 animation-duration 属性,否则持续的时间为0,并且永远不会播放动画。 基础练习 DOCTYPE html> Document @keyframes moveAndchange { 0%{ left: 0px; top: 0px; } 25%{ left: 200px; top: 200px; background: orange; border-radius: 0; } 50%{ left: 400px; top: 200px; background: orangered; border-radius: 50%; } 75%{ left:400px; top: 0px; background: palegreen; border-radius: 0px; } 100%{ left: 0px; top: 0px; background: aliceblue; border-radius: 50%; } } div{ width: 200px; height: 200px; margin: 200px; position: absolute; background: aqua; border-radius: 50%; animation: moveAndchange 10s; animation-timing-function: ease-out; animation-delay :2s; animation-timing-function: 2; } 总结1、keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。 如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。 3、用cubic-bezier设置动画的速度曲线,它是由曲线的斜率决定速度的快慢。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |