一、CSS3 动画介绍
CSS3动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器
二、CSS3 动画
(一)、CSS3@keyframes
定义
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中,您可以更改CSS样式的设定多次。
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。
0%是开头动画,100%是当动画完成。
为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器
@keyframes 规则
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
当**@keyframes** 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
规定动画的名称 animation-name
规定动画的时长 animation-duration
@keyframes 语法
-
语法:
@keyframes animationname {keyframes-selector {css-styles;}}
-
参数
animationname {string}
:必需。定义动画的名称。{keyframes-selector}
:必需。动画时长的百分比。合法的值有- 0-100%
- from(与 0% 相同)
- to(与 100% 相同)
{css-styles}
:必需。一个或多个合法的 CSS 样式属性
-
实例
@keyframes move { 0% { top: 0px; } 100% { top: 100px; } }
(二)、animation
-
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state
-
参数
animation-name
:规定需要绑定到选择器的 keyframe 名称animation-duration
:规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function
:规定动画的速度曲线。animation-delay
:规定在动画开始之前的延迟。animation-iteration-count
:规定动画应该播放的次数。animation-direction
:规定是否应该轮流反向播放动画。
(三)、animation-name
animation-name:规定@keyframes动画的名称
-
语法:
animation-name: name
-
参数
name {string}
:指定@keyframes动画的名称
-
实例
div { animation-name: mymove; }
(四)、animation-duration
animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是0
-
语法:
animation-duration: time
-
参数
time {number}
:规定完成动画所花费的时间,以秒或毫秒计。默认为0,意味着没有动画效果
-
实例
div { animation-duration: 0.5s; }
(五)、animation-timing-function
animation-timing-function:规定动画的速度曲线,默认是ease
-
语法:
animation-timing-function: value
-
参数
linear
:动画从头到尾的速度是相同的。ease
:默认。动画以低速开始,然后加快,在结束前变慢ease-in
:动画以低速开始ease-out
:动画以低速结束ease-in-out
:动画以低速开始和结束cubic-bezier(n,n,n,n)
:在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
-
实例
div { animation-timing-function: linear }
(六)、animation-delay
animation-delay:规定动画何时开始。默认是 0
-
语法:
animation-delay: time;
-
参数
{time}
:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0
-
实例
div { animation-delay: 2s }
(七)、animation-iteration-count
animation-iteration-count:规定动画被播放的次数。默认是 1
-
语法:
animation-iteration-count: n|infinite;
-
参数
n {number}
:定义动画播放次数的数值infinite
:规定动画应该无限次播放
-
实例
div { animation-iteration-count: infinite; }
(八)、animation-direction
animation-direction:规定动画是否在下一周期逆向地播放。默认是 “normal”
-
语法:
animation-direction: normal|alternate
-
参数
normal
:默认值。动画应该正常播放alternate
:动画应该轮流反向播放
-
实例
div { animation-direction: alternate; }
(九)、animation-play-state
animation-play-state:规定动画是否在下一周期逆向地播放。默认是 “normal”
您可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画
-
语法:
animation-play-state: paused|running
-
参数
paused
:规定动画已暂停running
:规定动画正在播放
-
实例
div { animation-play-state: paused; }
(十)、animation-fill-mode
animation-fill-mode:属性规定动画在播放之前或之后,其动画效果是否可见
-
语法:
animation-fill-mode : none | forwards | backwards | both;
-
参数
none
:不改变默认行为forwards
:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)backwards
:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)both
:向前和向后填充模式都被应用
-
实例
div { animation-fill-mode: both; }
三、CSS3 动画库
(一)、animate.css
animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果
-
下载地址
- 官方网站:https://daneden.github.io/animate.css/
- cdn地址:https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css
-
实例
(二)、wow.js
介绍
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感
WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求
cdn地址:https://cdn.bootcss.com/wow/1.1.2/wow.min.js
引用
<!-- 引用 -->
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.js"></script>
<!-- html模块 -->
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
<!-- 初始化 -->
<script>
new WOW().init();
</script>
wow配置
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
-
参数
boxClass {string}
:wow需要执行动画的元素的class。默认值为wowanimateClass {string}
:animation.css动画的class。默认值为animatedoffset {numebr}
:距离可视区域多少开始执行动画。默认值为0mobile {boolean}
:是否在移动设备执行动画。默认值为truelive {boolean}
:异步加载的内容是否有效。默认值为true
-
自定义属性
data-wow-duration {time}
:动画持续时间data-wow-delay {time}
:动画延迟时间data-wow-offset {number}
:元素的位置露出后距离底部多少像素执行data-wow-iteration {number}
:动画执行次数
实例
<h1 class="wow bounce" data-wow-delay=".1s">人才需求大,薪资高,晋升快</h1>
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 100
});
wow.init();
四、课后作业
- 熟悉css3动画,制作简单的案例
- 了解CSS3动画库,并使用其运用在项目上