HTML5-CSS3新增特性(续)
过渡效果(Transition)
使用过渡可以动态地改变一个颜色的值,以动画的形式过渡到另一个颜色
简写格式:
transition:transition: 过渡属性 过渡时间(不能省略) 过渡效果 延迟时间;
这些属性也可以进行分别定义:
transition-property属性
可以使用transition-property属性来指定要参与过渡的css属性名
格式:
transition-property: none | all | property;
参数:
none表示没有要过渡的属性
all 表示对所有属性应用过渡
property 表示CSS属性名称,多个名称之间用逗号分隔。
transition-duration属性
transition-duration 属性是用于指定过渡的时长,即从旧属性转换到新属性花费的时间,单位为秒(s)
格式:
transition-duration: time;
参数:
time 表示完成动画所需的秒数,默认为0,即没有过渡效果。
注意:
这个在简写时不能省略
transition-timing-function属性
transition-timing-function属性是整个过渡动画的核心,它用于指定用什么样的方式进行过渡。
格式:
transition-timing-function: effectname;
参数:
effectname 表示过渡效果的名称,默认值是ease,即以溶解方式进行过渡
transition-timing-function属性的值还有许多:
值 | 作用 |
---|---|
ease | 刚开始慢然后变快最后在慢的效果,默认值 |
linear | 匀速开始至匀速结束的过渡效果 |
ease-out | 以慢速结束的过渡效果 |
ease-in | 以慢速开始的过渡效果 |
cubic-bezier | 自定义特殊的贝塞尔曲线效果 |
transition-delay属性
transition-delay属性用于定义动画开始之前的延迟时间。
格式:
transition-delay: time;
参数:
time 表示时间,可以设置为s(秒)或者ms(毫秒),默认值为0,即表示没有延迟
动画效果
CSS3除了支持过渡的动画效果外,还可以使用animation属性实现更为复杂的动画效果。CSS中的动画效果与过渡效果类似,都是通过不断改变元素的属性值来实现动画效果的。他们的区别在于,使用过渡效果时只能通过属性指定开始状态和结束状态,然后再两个状态之间过渡,而不能对过渡中间的状态进行控制。而使用animation属性可以通过多个关键帧来定义动画中的各个状态,从而实现更为复杂的动画效果。
关键帧(keyframes)
在使用动画效果之前必须先定义关键帧,一个关键帧表示动画过程的一个状态,在css3中提供@keyframes属性用来定义关键帧
格式:
@keyframes animationName {
Keyframes-selector {css-styles;}
}
参数:
animationName
表示当前动画的名称,它将作为引用时的唯一标识,因此不能为空。
Keyframes-selector
关键帧选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个百分比、from或者to。
其中from和0%效果相同表示动画的开始,to和100%效果相同表示动画的结束。
css-styles
定义执行到当前关键帧时对应的动画状态,由CSS样式属性进行定义,多个属性之间用分号分隔,不能为空。
动画属性
用@keyframes属性定义好动画的关键帧之后,他还没有应用到任何页面元素上,因此还不能执行。这就需要使用CSS3中的animation属性,需引入
animation-name 属性
该属性用于定义要应用的动画名称
格式:
animation-name: animationName;
参数:
animationName指的是使用@keyframes属性定义的动画名称。
如果值为none则表示不应用任何动画效果,通常用于覆盖或取消动画。
animation-duration属性
该属性用于定义整个动画效果完成所需要的时间
格式:
animation-duration: time;
参数:
time 参数是以秒(s)或则毫秒(ms)为单位的时间,默认是0表示没有动画。
animation-timing-function属性
该属性用于定义使用哪种方式执行动画效果,跟过渡的transition-timing-function属性几乎是一样的
格式:
animation-timing-function: effectname;
参数:
effectname表示过渡效果的名称
已有的定义好的效果如下:
值 | 作用 |
---|---|
linear | 以匀速的方式开始的动画效果 |
ease | 刚开始慢然后变快最后在慢的动画效果,默认值 |
ease-out | 以慢速结束的动画效果 |
ease-in | 以慢速开始的动画效果 |
ease-in-out | 以慢速开始和结束 |
cubic-bezier | 自定义特殊的贝塞尔曲线效果 |
animation-delay 属性
该属性用于定义执行动画效果之前的延迟时间
格式:
animation-delay: times;
参数:
times 参数是以秒(s)或则毫秒(ms)为单位的时间,默认是0表示没有延迟。
animation-iteration-count属性
该属性用于定义当前动画效果重复执行的次数
格式:
animation-iteration-count: n|infinite;
参数:
n 表示动画执行几次,是一个整数,默认为1
infinite 表示该动画无限次重复执行
animation-direction 属性
该属性用于定义当前动画效果播放的方向
格式:
animation-direction: direction;
参数:
direction参数有两个值:
normal 默认值,表示每次动画都从头开始执行到最后
alternate 表示动画播放到最后时将反向播放,即从最后状态逆向播放到开始状态。
建议:
当animation-iteration-count(动画执行次数)为infinite(无限次执行时) 使用alternate 参数效果会更好
animation-fill-mode 属性
该属性用于定义动画开始之前或者播放之后,其动画效果是否可见
animation-fill-mode:forwards | backwards | both;
其参数如下:
值 | 作用 |
---|---|
forwards | 表示在动画完成后继续使用最后一个关键帧里面的样式 (保留完成时的动作) |
backwards | 表示在动画开始之前使用初始关键帧里面定义的样式 |
both | 同时应用forwards和backwards的效果 |
animation-play-state属性
该属性用于动画的播放和暂停
格式:
animation-play-state:running|paused;
参数:
running 动画开始
paused 动画结束
动画简写属性
所有动画属性的简写属性,除了 animation-play-state 属性
格式:
animation: animation-name 引用@keyframes定义的动画名称
animation-duration 动画执行的时间
animation-timing-function 动画执行效果
animation-delay 动画执行效果之前的延迟时间
animation-iteration-count 动画的执行次数
animation-direction 动画的执行方向
animation-fill-mode; 动画开始之前与播放之后的显示效果
弹性盒模型
如有错误还请指出,希望这篇文章能给予你们帮助!