逆战班第一篇：CSS动画

目录：
一、简单介绍
二、CSS3@keyframes规则
三、浏览器支持
四、CSS动画
五、什么是CSS动画
六、CSS动画属性

一、简单介绍
通过CSS3动画，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画、以及Javascript。

二、CSS3 @keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

三、浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
实例：

@keyframes myfirst
{from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{from {background: red;}
to {background: yellow;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{from {background: red;}
to {background: yellow;}
}@-o-keyframes myfirst /* Opera */
{from {background: red;}
to {background: yellow;}
}

四、CSS动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

实例：

div
{animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

五、什么是CSS3的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
实例：

@keyframes myfirst
{0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}@-moz-keyframes myfirst /* Firefox */
{0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}@-webkit-keyframes myfirst /* Safari 和 Chrome */
{0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}@-o-keyframes myfirst /* Opera */
{0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

六、CSS动画属性
@keyframes 规定动画
animation 所有动画属性的简写属性，除了 animation-play-state 属性
animation-name 规定 @keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒默认是 0
animation-timing-function 规定动画的速度曲线。默认是 “ease”
运动使用的类型（加速，减速，贝塞尔曲线运动）
animation-delay 规定动画何时开始默认是 0 infinite无限循环
animation-iteration-count 规定动画被播放的次数默认是 1
animation-direction 规定动画是否在下一周期逆向地播放默认是"normal"
reverse 反向运动
alternate 单数次，顺时针；偶数次，逆时针
alternate-reverse 单数次，逆时针偶数次，顺时针
animation-play-state 规定动画是否正在运行或暂停默认是 “running”
paused 暂停
running 运动
animation-fill-mode 规定对象动画时间之外的状态
实例：

div
{animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
综合写法：
div
{/*animation：名字 运动时间 速度 延迟时间 次数;*/
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

逆战班第一篇：CSS动画相关推荐

“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）
目录 CSS动画简介第一部分:CSS Transition 1.1 基本用法 1.2 transition-delay 1.3 transition-timing-function 1.4 tran ...
CSS 动画学习笔记——Animation篇
首先了解一下 Animation 的基本用法,使用其需要给动画指定一个周期持续的时间,以及动画效果的名称.可以看一下demo 注释:这是一个给透明和背景色属性设置的一个动画过渡效果实现很简单(具体看 ...
android studio实现动画,android studio上的基本动画实现（第一篇）
hello,各位小伙伴们,在不少小伙伴们刚刚开始学习android的时候,经常会有一些project里面须要有一些基本动画的插入,那么具体是要怎么实现呢?咱们接下一块儿分析一下在android中的几种 ...
android studio上的基本动画实现（第一篇）
转自https://www.cnblogs.com/zhangch123/archive/2016/11/19/6079756.html hello,各位小伙伴们,在很多小伙伴们刚刚开始学习andro ...
【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标前言一. ...
CSS动画篇之炫酷时钟之时钟墙
通过CSS制作的时钟大家肯定看到的多了,但是像下面这样的时钟是不是很少见,整个时钟是有很多个小的时钟组合而成,每秒通过多个时钟的动画来切换时间,不得不说这个设计是非常的炫酷且有特色. 前言看到这个动 ...
【游戏开发实战】使用Unity制作像天天酷跑一样的跑酷游戏——第一篇：人物动画序列帧
文章目录一.前言二.创建工程三.导入序列帧图片素材四.设置图片格式五.切割序列帧六.制作序列帧动画七.运行效果一.前言嗨,大家好,我是新发,今天是大年初一,大家牛年快乐,牛气冲天. ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
目录 [实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生 ...

逆战班第一篇：CSS动画

逆战班第一篇：CSS动画相关推荐

最新文章

热门文章