第八十三节,CSS3动画效果
CSS3动画效果
学习要点:
1.动画简介
2.属性详解
3.简写和版本
本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行。
一.动画简介
CSS3提供了类 Flash关键帧控制的动画效果,通过animation属性实现。
animation实现动画效果主要由两个部分组成:
1.通过类 Flash动画中的关键帧声明一个动画;
2.在animation属性中调用关键帧声明的动画。
CSS3提供的animation是一个复合属性,它包含了很多子属性。如下表所示:
属性 说明
animation-name 用来指定一个关键帧动画的名称,这个动画
名必须对应一个@keyframes规则。CSS加
载时会应用animation-name指定的动画,
从而执行动画。
animation-duration 用来设置动画播放所需的时间
animation-timing-function 用来设置动画的播放方式
animation-delay 用来指定动画的延迟时间
animation-iteration-count 用来指定动画播放的循环次数
animation-direction 用来指定动画的播放方向
animation-play-state 用来控制动画的播放状态
animation-fill-mode 用来设置动画的时间外属性
animation 以上的简写形式
除了这9个属性之外,动画效果还有一个重要的属性,就是关键帧属性:@keyframes。它的作用是声明一个动画,然后在animation调用关键帧声明的动画。
//基本格式,“name”可自定义
@keyframes name {
/*...*/
}
二.属性详解
在讲解动画属性之前,先创建一个基本的样式。
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
} <div>
<p>是一部由北青传媒股份</p>
</div>
1.@keyframes先声明一个动画关键帧。
//基本格式,“name”可自定义
@keyframes name {
/*...*/
}
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
}
} <div>
<p>是一部由北青传媒股份</p>
</div>
2.animation-name 调用@keyframes关键帧动画
属性值 说明
none 默认值,没有指定任何动画
关键帧动画名称 是由@keyframes指定创建的动画名称
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
以上通过关键帧的方式,这里插入了三个关键帧。0%表示动画开始的地方,50%表示动画进行一半时,100%表示动画结束时
3.animation-duration设置动画播放的时间
就是动画用多长时间执行完成
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
4.animation-timing-function设置缓动
属性值 说明
ease 默认值,元素样式从初始状态过渡到终止状态时速度由
快到慢,逐渐变慢。等同于贝塞尔曲线(0.25,0.1,
0.25, 1.0)
linear 元素样式从初始状态过渡到终止状态速度是恒速。等同
于贝塞尔曲线(0.0,0.0, 1.0, 1.0)
ease-in 元素样式从初始状态过渡到终止状态时,速度越来越
快,呈一种加速状态。等同于贝塞尔曲线(0.42, 0,
1.0, 1.0)
ease-out 元素样式从初始状态过渡到终止状态时,速度越来越
慢,呈一种减速状态。等同于贝塞尔曲线(0,0,0.58,
1.0)
ease-in-out 元素样式从初始状态过渡到终止状态时,先加速,再减
速。等同于贝塞尔曲线(0.42,0, 0.58, 1.0)
cubic-bezier 自定义三次贝塞尔曲线
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
5.animation-delay 设置延迟时间
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
/*设置延迟时间*/
animation-delay: 1s;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
6.animation-iteration-count设置循环次数
属性值 说明
次数 默认值为1
infinite 表示无限次循环
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
/*设置延迟时间*/
animation-delay: 1s;
/*设置循环次数*/
animation-iteration-count: infinite;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
7.animation-direction 设置缓动方向交替
属性值 说明
normal 默认值,每次播放向前
alternate 一次向前,一次向后,一次向前,一次向后这样交替
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
/*设置延迟时间*/
animation-delay: 1s;
/*设置循环次数*/
animation-iteration-count: infinite;
/*设置缓动方向交替*/
animation-direction: alternate;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
8.animation-play-state设置停止播放动画
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
/*设置延迟时间*/
animation-delay: 1s;
/*设置循环次数*/
animation-iteration-count: infinite;
/*设置缓动方向交替*/
animation-direction: alternate;
/*设置停止播放动画*/
animation-play-state: paused;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
9.animation-fill-mode设置结束后不在返回
属性值 说明
none 默认值,表示按预期进行和结束
forwards 动画结束后继续应用最后关键帧位置,即不返回
backforwards 动画结束后迅速应用起始关键帧位置,即返回
both 根据情况产生forwards或backforwards的效果
//both需要结合,次数和播放方向
animation-iteration-count: 4;
animation-direction: alternate;
/*设置元素样式*/
div{
width: 200px;
height: 200px;
background-color: #ff563a;
border: 5px solid #1313ff;
/*调用@keyframes关键帧动画*/
animation-name: myani;
/*设置动画播放的时间*/
animation-duration: 2s;
/*设置缓动*/
animation-timing-function: linear;
/*设置延迟时间*/
animation-delay: 1s;
/*设置循环次数*/
/*animation-iteration-count: infinite;*/
/*设置缓动方向交替*/
animation-direction: alternate;
/*设置停止播放动画*/
/*animation-play-state: paused;*/
animation-fill-mode:forwards;
}
/*@keyframes先声明一个动画关键帧。*/
@keyframes myani {
0% {
background-color: #ff3728;
border: 2px solid #fffa35;
margin-left:;
}
50% {
background-color: #fffa35;
border: 2px solid #1f38ff;
margin-left:50px;
}
100% {
background-color: #1522ff;
border: 2px solid #30ff3c;
margin-left:100px; }
} <div>
<p>是一部由北青传媒股份</p>
</div>
六.简写和版本
简写形式完整版
animation: myani(调用关键帧名称) 1s(设置动画播放的时间) ease(设置缓动) 2(设置延迟时间) alternate(设置循环次数) 0s(设置缓动方向交替) both(设置结束后不在返回);
animation: myani 1s ease 2 alternate 0s both;
为了兼容旧版本,需要加上相应的浏览器前缀,版本信息如下表:
Opera Firefox Chrome Safari IE
支持需带前缀 15 ~ 29 5~ 15 4 ~ 42 4 ~ 8 无
支持不带前缀 无 16+ 43+ 无 10.0+
兼容完整版,Opera在这个属性上加入webkit,所以没有-o-
-webkit-animation:myani 1s ease 2 alternate 0s both;
-moz-animation:myani 1s ease 2 alternate 0s both;
-ms-animation:myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;
@keyframes也需要加上前缀
@-webkit-keyframes myani {...}
@-moz-keyframes myani {...}
@-o-keyframes myani {...}
@-ms-keyframes myani {...}
keyframes myani {...}
第八十三节,CSS3动画效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
- 第三百八十三节,Django+Xadmin打造上线标准的在线教育平台—第三方模块django-simple-captcha验证码
第三百八十三节,Django+Xadmin打造上线标准的在线教育平台—第三方模块django-simple-captcha验证码 下载地址:https://github.com/mbi/django- ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
随机推荐
- C语言递归回溯法迷宫求解
本例将随机产生一个10*10的迷宫输出后,在下面输出此迷宫的解法. 解法为从坐标(1,1)处进入,从(8,8,)出去,优先线路为先右后下再上最后为左. 不少人求解此题时运用的栈的相关知识,本例寻找线路 ...
- JAVA 代码开发规范
一.开发工具规范: 1. 开发工具经项目负责人调试后统一确定. 2. 开发工具一经确定不允许集成任何非统一插件,若有需要,经项目负责人同意后统一为 项目组成员添加. 3. 开发工具的编码格式不允许修改 ...
- android两种方式获取AsyncTask返回值
获取AsyncTask返回值,在Activity中使用. 引用链接:https://www.oschina.net/code/snippet_725438_49858#72630 [1].[代码] [ ...
- Eclipse/MyEclipse 安裝後應該更改的設置
基本上都通過 Window -> Preferences 進行設置: Java 保存自動格式化: Java:Java -> Editor -> Save Actions,選中 Per ...
- Weblogic概念与基础
WebLogic Server 1.BEA WebLogic Server 1.Domain:域是个逻辑概念,用来组织管理一系列的应用服务器实例,中心配置文件Config.xml. 2.Cluster ...
- Centos7下建立rubymine快捷方式到侧栏或桌面
gnome桌面的所有菜单项都存储如下位置: /usr/share/applications/ 新建一个菜单项,直接在该目录下新建一个后缀名为.desktop的文件即可. $ vi /usr/share ...
- mysql的联合,连接,子查询
- 十分钟学会 tmux
tmux 是一款终端复用命令行工具,一般用于 Terminal 的窗口管理.在 macOS 下,使用 iTerm2 能应付绝大多数窗口管理的需求. 如上图所示,iTerm2 能新建多个标签页(快捷键 ...
- Java中的字面量
在计算机科学中,字面量(literal)是用于表达源代码中一个固定值的表示法(natation).几乎所有计算机编程语言都具有对基本值的字面量表示,诸如:整数.浮点数以及字符串:而有很多也对布尔类型和 ...
- 解决larave-dompdf中文字体显示问题
1.安装laravel-dompdf依赖. Packagist:https://packagist.org/packages/barryvdh/laravel-dompdf composer requ ...