CSS3动画animation相关属性与关键帧规则keyframes
2016-11-23 20:53
656 查看
我昨天写三维正方体的时候,就用到了动画的语法
今天就来系统复习一下
过渡transition有着它的局限性
虽然简单,但是它只能在两个状态之间改变
并且它需要事件的驱动才能够进行
不能够自己运动
所以为了解决这样的问题
我们需要animation动画
仅仅有animation属性是不够的
我们还需要@keyframes规则
先来看一个例子
当鼠标悬浮时,元素先变红然后过渡到紫色有过渡到绿色
我们先来看看@keyframes 规则
然后animation会按照keyframes关键帧里我们指定的帧状态进行过渡执行
0% - 100% 就代表动画的时间过渡
规则中的0%和100%,
可以替换成from和to关键字
如果我们省略了起始帧,浏览器会按照它最初的样式进行过渡
除此之外,我们还可以把相同的帧写在一起像这样
animation-name
指定keyframes动画的名称
animation-duration
指定动画执行时间
animation-timing-function
指定动画的速度曲线,默认“ease”缓动
animation-delay
指定动画延迟时间,默认“0”无延迟
animation-iteration-count
指定动画播放的次数,默认“1”执行1次
animation-direction
规定动画执行方向,默认“normal”
这个复合属性比我们的transition要复杂一些
前四个属性就不多解释了,类似于我们的transition
忘了的同学,戳这里->传送门
animation-iteration-count动画播放次数我们除了填写数字之外
还可以使用一个常用的关键字infinite无限循环
animation-direction除了normal以外还有如下属性值
reverse
反向播放动画
alternate
轮流播放动画
alternate-reverse
反向轮流播放动画
通过一个例子来解释
默认normal:
两次测试动画:
100px -> 200px
100px -> 200px
reverse:
两次测试动画:
200px -> 100px
200px -> 100px
alternate:
两次测试动画:
100px -> 200px
200px -> 100px
alternate-reverse:
两次测试动画:
200px -> 100px
100px -> 200px
所以不能写在animation中
animation-fill-mode规定对象动画时间之外的状态,默认“none”
除了none以外还有如下属性值
forwards
动画完成后,保持最后一个属性(定义在最后一帧)
backwards
在animation-delay指定时间内、动画显示之前,应用起始属性(定义在第一帧)
both
应用forwards和backwards两种模式
forwards
这个属性还是蛮有用的
还是我们上面的例子
我们发现1s之后,元素并没有回到最初的100px,而是保持了我们最后一帧的200px状态
backwards
理解这个属性,我们需要先加一个延时
我就不配图了
我们发现鼠标悬浮后,1s后瞬间变为150px,然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px
现在增加backwards
这回我们发现鼠标悬浮的一瞬间就变为15px,然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用,延迟前就应用第一帧动画的样式,然后准备过渡
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行
今天的动画就先写这么多,感觉写了很长时间
日后再总结动画相关的性能问题
==主页传送门==
今天就来系统复习一下
过渡transition有着它的局限性
虽然简单,但是它只能在两个状态之间改变
并且它需要事件的驱动才能够进行
不能够自己运动
所以为了解决这样的问题
我们需要animation动画
动画
若想实现动画效果仅仅有animation属性是不够的
我们还需要@keyframes规则
先来看一个例子
div class="demo"></div>
.demo { width: 100px; height: 100px; background-color: gold; } .demo:hover { animation: change 2s linear; } @keyframes change { 0% { background-color: red; } 50% { background-color: purple; } 100% { background-color: lime; } }
当鼠标悬浮时,元素先变红然后过渡到紫色有过渡到绿色
我们先来看看@keyframes 规则
keyframes
在@keyframes中,我们定义动画关键帧然后animation会按照keyframes关键帧里我们指定的帧状态进行过渡执行
0% - 100% 就代表动画的时间过渡
规则中的0%和100%,
可以替换成from和to关键字
@keyframes xxx { from { ...... } to { ...... } }
如果我们省略了起始帧,浏览器会按照它最初的样式进行过渡
@keyframes change { 100% { background-color: lime; } }
除此之外,我们还可以把相同的帧写在一起像这样
@keyframes change { from,to { background-color: red; } 50% { background-color: blue; } }
animation
animation是一个复合属性,有以下子属性animation-name
指定keyframes动画的名称
animation-duration
指定动画执行时间
animation-timing-function
指定动画的速度曲线,默认“ease”缓动
animation-delay
指定动画延迟时间,默认“0”无延迟
animation-iteration-count
指定动画播放的次数,默认“1”执行1次
animation-direction
规定动画执行方向,默认“normal”
这个复合属性比我们的transition要复杂一些
前四个属性就不多解释了,类似于我们的transition
忘了的同学,戳这里->传送门
animation-iteration-count动画播放次数我们除了填写数字之外
还可以使用一个常用的关键字infinite无限循环
animation-direction除了normal以外还有如下属性值
reverse
反向播放动画
alternate
轮流播放动画
alternate-reverse
反向轮流播放动画
通过一个例子来解释
.demo { width: 100px; height: 100px; background-color: gold; } .demo:hover { animation: change 1s 2 linear; } @keyframes change { to { width: 200px; } }
默认normal:
两次测试动画:
100px -> 200px
100px -> 200px
.demo:hover { animation: change 1s 2 linear reverse; /*改*/ }
reverse:
两次测试动画:
200px -> 100px
200px -> 100px
.demo:hover { animation: change 1s 2 linear alternate; /*改*/ }
alternate:
两次测试动画:
100px -> 200px
200px -> 100px
.demo:hover { animation: change 1s 2 linear alternate-reverse; /*改*/ }
alternate-reverse:
两次测试动画:
200px -> 100px
100px -> 200px
animation-fill-mode
下面我要讲的两个属性都不是animation的子属性所以不能写在animation中
animation-fill-mode规定对象动画时间之外的状态,默认“none”
除了none以外还有如下属性值
forwards
动画完成后,保持最后一个属性(定义在最后一帧)
backwards
在animation-delay指定时间内、动画显示之前,应用起始属性(定义在第一帧)
both
应用forwards和backwards两种模式
forwards
这个属性还是蛮有用的
还是我们上面的例子
.demo:hover { animation: change 1s linear; /*改*/ animation-fill-mode: forwards; /*改*/ }
我们发现1s之后,元素并没有回到最初的100px,而是保持了我们最后一帧的200px状态
backwards
理解这个属性,我们需要先加一个延时
.demo:hover { animation: change 1s linear 1s; /*改*/ /*animation-fill-mode: backwards;*/ /*待增*/ } @keyframes change { from { /*增*/ width: 150px; } to { width: 200px; } }
我就不配图了
我们发现鼠标悬浮后,1s后瞬间变为150px,然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px
现在增加backwards
.demo:hover { animation: change 1s linear 1s; /*改*/ animation-fill-mode: backwards; /*增*/ }
这回我们发现鼠标悬浮的一瞬间就变为15px,然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用,延迟前就应用第一帧动画的样式,然后准备过渡
animation-play-state
animation-play-state 指定动画的运行或暂停。默认 “running”除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行
demo.style.animationPlayState = "paused";
今天的动画就先写这么多,感觉写了很长时间
日后再总结动画相关的性能问题
==主页传送门==
相关文章推荐
- CSS3动画——@keyframes规则和animation属性
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- 详解css3系列:动画@keyframes和Animation
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画animation属性
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画-animation属性
- css3 transition属性变化与animation动画的相似性以及不同点
- CSS3 动画 Transitions, Transforms和Animation属性
- CSS3动画之animation属性学习笔记
- css3学习--css3动画详解一(animation属性)
- CSS3动画 ☞ animation-time-function ☞ step属性
- CSS3动画属性之Animation
- 详解css3系列:动画@keyframes和Animation
- 8.HTML5 CSS3 变形与动画相关属性
- css3动画属性--animation(动画)
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中和动画有关的属性有三个 transform、 transition 和 animation
- css3动画模块transform transition animation属性解释
- CSS3中的动画,animation、transition和transform属性的运用