初识CSS3 Animation动画

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。在实际项目中为页面加上一些适当的动画效果,往往会给人灵动、新颖的感觉,极大程度上增加用户体验。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

描述
语法
实例

描述

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。使用B/S开发框架在实际项目中为页面加上一些适当的动画效果,往往会给人灵动、新颖的感觉,极大程度上增加用户体验。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

我们知道CSS3的Animation有八个参数

animation-name
animation-duration
animation-delay
animation-direction
animation-play-state
animation-iteration-count
animation-fill-mode
animation-timing-function

语法

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
<' animation-name '>:检索或设置对象所应用的动画名称
<' animation-duration '>:检索或设置对象动画的持续时间
<' animation-timing-function '>:检索或设置对象动画的过渡类型
<' animation-delay '>:检索或设置对象动画延迟的时间
<' animation-iteration-count '>:检索或设置对象动画的循环次数
<' animation-play-state '>:检索或设置对象动画的状态。
<' animation-direction '>:检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>:检索或设置对象动画时间之外的状态

animation-delay
规定动画何时开始,也即是指动画延时执行时间,默认是 0。

animation-direction
默认是 "normal",规定动画是否在下一周期逆向地播放,还有下列可参考值:

reverse:反方向运行

alternate-reverse:动画先反再正方向运行,并持续交替运行

alternate:动画先正常再反方向运行,并持续交替运行

animation-iteration-count
规定动画被播放的次数。默认是 1。当然,我们可以设置2次、3次、4次等等。还有个无线循环关键字infinite,反复循环播放动画。

animation-play-state
规定动画是否正在运行或暂停。默认是running运行装置。还有个值paused暂停状态。

animation-fill-mode
规定对象动画时间之外的状态。
none:默认值。不设置对象动画之外的状态
both:设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧;动画完成之后是"to"或"100%"关键帧状态。 backwards:设置对象状态为动画开始时的状态
forwards:设置对象状态为动画结束时的状态

animation-timing-function
这是控制时间的属性,在取值中有常用到的三次贝塞尔曲线和steps() 函数。
参数介绍
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的
除了ease,linear、cubic-bezier之类的过渡函数都会为其插入补间。但如果只需要关键帧之间的跳跃,应该使用steps过渡方式。
animation-timing-function 作用是规定动画速度的曲线。

animation-timing-function
timing-function 作用于不是整个动画而是两个关键帧之间。
那么第一个参数steps的设置都是针对两个关键帧之间的,而非是整个keyframes,所以第一个参数的次数对应了每次steps的变化,
换句话说也是 0-50 之间变化10次,  50-100之间 变化10次 ,100-150 之间变化10次,以此类推。

animation动画实例

实例一使用百分比:
@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:330px; top:0px;}
    50%  {background: blue; left:330px; top:150px;}
    75%  {background: green; left:0px; top:150px;}
    100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst {/* Opera */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:330px; top:0px;}
    50%  {background: blue; left:330px; top:150px;}
    75%  {background: green; left:0px; top:150px;}
    100% {background: red; left:0px; top:0px;}
    
@-moz-keyframes myfirst{ /* Firefox */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:330px; top:0px;}
    50%  {background: blue; left:330px; top:150px;}
    75%  {background: green; left:0px; top:150px;}
    100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{ /* Safari 和 Chrome */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:330px; top:0px;}
    50%  {background: blue; left:330px; top:150px;}
    75%  {background: green; left:0px; top:150px;}
    100% {background: red; left:0px; top:0px;}
}
}

实例二使用From To:

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /*Firefox*/
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
@-moz-keyframes mymove { /*Firefox*/
    from {left:0px;}
    to {left:200px;}
}
CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。在实际项目中使用B/S开发框架为页面加上一些适当的动画效果,往往会给人灵动、新颖的感觉,极大程度上增加用户体验。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。


网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:华晨软件-云微开发平台 » 初识CSS3 Animation动画
本文标题:初识CSS3 Animation动画
本文地址:http://www.hocode.com/OrgTec/UI/0011.html

相关文章: web框架UI轮播图--焦点图 / 幻灯片

电话
电话 18718672256

扫一扫
二维码