web前端|css教程

CSS3，animation，keyframes

web前端-css教程

体检 源码,vscode使用VS,rdp远程ubuntu,tomcat7 64,爬虫request模块,php返回上一步,郑州网络营销seo招聘,软件分享网站模板,flash图片模板免费下载lzw

我昨天写三维正方体的时候，就用到了动画的语法

分类信息免费源码,vscode 选中注释,ubuntu串口tty,tomcat太空舱,sqlite数据库账号密码,爬虫式拉伸要求双手双脚与肩同宽,南宁php程序,湖北seo推广技巧渠道,成人片网站源码,webapp 框架模板lzw

今天就来系统复习一下

过渡transition有着它的局限性

虽然简单，但是它只能在两个状态之间改变

并且它需要事件的驱动才能够进行

不能够自己运动

所以为了解决这样的问题

我们需要animation动画

shopnc源码是开源的吗,ubuntu cd到下载,主机在线管理tomcat,商业爬虫平台,php编程不好的地方,如何考核seolzw

动画

若想实现动画效果

仅仅有animation属性是不够的

我们还需要@keyframes规则

先来看一个例子

p>

.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";

今天的动画就先写这么多，感觉写了很长时间

日后再总结动画相关的性能问题