你的位置:首页 > 网页设计

[网页设计]css 动画


css3动画

 

@keyframes

规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性

以百分比来规定改变发生的时间,或者通过关键词"from"和"to",等价于0%和100%

语法:@keyframes animationname {keyframes-selector {css-styles;}}

 

animation

是一个简写属性,用于设置六个动画属性:

animation-name

规定@keyframes动画的名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是0

animation-timing-function

规定动画的速度曲线,速度曲线用于使变化更为平滑

linear 动画从头到尾的速度是相同的

ease 默认。动画以低速开始,然后加快,在结束前变慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值

animation-delay

规定动画何时开始。默认是0

animation-iteration-count

规定动画被播放的次数。默认是1

infinite 规定动画应该无限次播放

animation-direction

规定动画是否在下一周期逆向地播放

normal 默认值。动画应该正常播放

alternate 动画应该轮流反向播放

animation-play-state

规定动画是否正在运行或暂停。默认是"running"

paused 规定动画已暂停

running 规定动画正在播放

animation-fill-mode

规定动画在播放之前或之后,其动画效果是否可见

none 不改变默认行为

forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)

backwards 在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

<div> </div><style>  div{    width: 100px;     height: 100px;     background: red;     animation: demo 5s ease infinite;    position: relative;  }  @keyframes demo{    0%  {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px; border-radius: 50%;}    50% {background:blue; left:200px; top:200px; border-radius: 0%;}    75% {background:green; left:0px; top:200px; border-radius: 50%;}    100% {background:red; left:0px; top:0px;}  }</style>

<div>  <p>目前主流浏览器chrome、safari、firefox、opera已经支持CSS3大部分功能了,IE10以后也开始全面支持CSS3了</p></div><style>  div{    margin: 0 auto;    width: 500px;    height: 35px;    overflow: hidden;    position: relative;  }  p{    width: 100000px;    position: absolute;    left: 0;    animation: divv 10s linear infinite;  }  @keyframes divv{    from{ left: 500px; }    to{ left: -800px; }  }</style>