通过CSS3,我们无需javascript也可以创建一些简易的动画效果,下面我们来看一下相关的属性和规则。
CSS3 animation属性
通过animation
属性,我们可以给元素附加动画效果及样式,下表列出了animation
属性的值:
属性 | 功能 |
---|---|
animation-name | 定义动画的名称 |
animation-duration | 定义动画运行一个周期花费的时间 |
animation-timing-function | 定义动画的速度曲线 |
animation-delay | 定义动画开始运行前的延迟时间 |
animation-iteration-count | 定义动画被播放的次数 |
animation-direction | 定义是否应该轮流反向播放动画 |
animation-fill-mode | 定义动画在播放之前或之后,其动画效果是否可见 |
animation-name:
自定义动画名称,若值为none
,则规定无动画效果。
animation-duration:
该属性单位为s或者ms,默认值为0,即无动画效果。
注意:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
animation-timing-function:
具体值有:
linear
: 规定动画从开始到结束做匀速运动。ease
(默认属性): 规定动画以低速开始运动,然后加快,在结束前变慢。ease-in
: 规定动画以低速开始运动。ease-out
: 规定动画以低速结束运动。ease-in-out
: 规定动画以低速开始和结束运动。cubic-bezier(n,n,n,n)
: 贝赛尔曲线,我们在 cubic-bezier 函数中自定义它的值。可能的值是从 0 到 1 的数值。
animation-delay:
动画总是在经过animation-delay
规定的时间过后才开始运动,其值同样以s或ms计,默认值为0。
注意:animation-delay
允许负值,-2s 使动画立即开始,但跳过animation-duration
时间的 2 秒进入动画。
animation-iteration-count:
其值为n或infinite
,n为动画播放的次数值,infinite
规定动画应该无限次的播放。
animation-direction:
属性值:
normal
: 默认值。规定动画应该正常播放,从0%~100%。reverse
: 规定动画应该反向播放, 从100%~0%。alternate
: 规定动画应该轮流反向播放,一次正向(0%——100%),一次反向(100%——0%)
注意:如果 animation-direction
值是 “alternate
”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放,如果把动画设置为只播放一次,则该属性值没有效果。即:如果动画设置为播放两次,并设置animation-direction
值为alternate
,则动画会播放一次正向与一次反向,加起来两次。
animation-fill-mode:
通过该属性,我们可以决定动画的填充模式。
none
: 不改变默认行为。forwards
: 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。backwards
: 在animation-delay
所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。both
: 向前和向后填充模式都被应用。
animation 属性的复合写法
animation
属性是一个简写属性,我们可以通过简写更方便的规定动画的属性值。
语法
animation
: animation-name
| animation-duration
| animation-timing-function
| animation-delay
| animation-iteration-count
| animation-direction
;
各属性之间用空格隔开。
注意:除了animation-duration
animation-delay
之外,其他属性之间没有固定书写书序,当我们只规定了一个时间时,默认是animation-duration
的值,若我们规定了两个时间,则第一个时间是animation-duration
的值,第二个是animation-delay
的值。
CSS3 @keyframes 规则
通过animation
我们可以规定动画的属性,但是若要创建一个动画并规定某项 CSS 样式,创建由当前样式逐渐改为新样式的动画效果,那我们需要用到@keyframes
规则
定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注意:默认情况下,元素运动完毕后,会停到起始位置。
语法
@keyframes animation-name {
from {css-styles;}
to {css-styles;}
}
此语句等价于:
@keyframes animation-name {
0% {css-styles;}
100% {css-styles;}
}
为了更方便的理解,下面我们看一个简单的颜色变化的例子:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
width: 100px;
height: 100px;
background-color: black;
animation: anim1 6s 2s linear;
}
@keyframes anim1 {
0%{
background-color: green;
}
50%{
background-color: blue;
}
100%{
background-color: purple;
}
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
这个动画是一个黑色的正方形在两秒后0%时匀速的从绿色变为蓝色再变为紫色的过程,我们可以看到,第一个6s是动画一周期花费的时间,第二个2s是开始前的延迟时间。
如果我们这时加上forwards
,即
animation: anim1 6s 2s linear forwards;
则动画最后停止时会一直保持为紫色。
而如果是backwards
的话,即
animation: anim1 6s 2s linear backwards;
动画会在开始的2s时间内保持为绿色,2s后从0%开始变化,如果不加backwards
,则动画在开始会一直是黑色,直到0%。
博客小新第一天入驻csdn,喜欢记录一些平时的知识与心得,请各位大牛小新多多指教:)
———逆战班手记
参考文献来源(侵删):https://www.w3school.com.cn/css3/css3_animation.asp