CSS3动画
CSS3动画是一种实现元素在网页中逐渐变化样式的技术。它可以让网页的动画效果更加丰富和灵活,而不需要使用Flash或JavaScript。在本文中,我们将介绍CSS3动画的基本概念和用法。
动画的原理
要创建CSS3动画,我们需要指定两个要素:
- 要添加动画效果的CSS属性
- 动画函数
例如,我们可以为一个div
元素的animation
属性添加一个动画函数mymove
,让它在5秒内从左上角移动到右下角:
div {
animation: mymove 5s; /* 动画属性和函数 */
}
这就是CSS3动画的基本效果。我们可以使用不同的动画函数来实现不同的动画效果,也可以使用多个动画函数来组合出复杂的动画效果。
动画函数
CSS3提供了一种特殊的规则,叫做@keyframes
规则,用来定义动画函数。@keyframes
规则内指定一个或多个关键帧,每个关键帧表示动画在某个时间点的状态。我们可以用百分比来表示时间点,或者用关键词from
和to
来表示起始和结束状态。
例如,我们可以定义一个名为mymove
的动画函数,让元素从左上角移动到右下角:
@keyframes mymove {
from {left: 0px; top: 0px;}
to {left: 200px; top: 200px;}
}
我们也可以定义更多的关键帧,让元素在移动过程中改变颜色、大小、形状等:
@keyframes mymove {
0% {left: 0px; top: 0px; background: red;}
25% {left: 200px; top: 0px; background: yellow;}
50% {left: 200px; top: 200px; background: blue;}
75% {left: 0px; top: 200px; background: green;}
100% {left: 0px; top: 0px; background: red;}
}
动画属性
除了指定要添加动画效果的CSS属性和函数之外,我们还可以使用以下几个属性来控制动画的细节:
animation-name
:规定要绑定到选择器的关键帧的名称。animation-duration
:规定动画完成一个周期所花费的秒或毫秒。默认是0。animation-timing-function
:规定动画的速度曲线。默认是"ease"。animation-delay
:规定动画何时开始。默认是0。animation-iteration-count
:规定动画被播放的次数。默认是1。animation-direction
:规定动画是否在下一周期逆向地播放。默认是"normal"。animation-fill-mode
:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。animation-play-state
:规定动画是否正在运行或暂停。默认是"running"。
我们可以使用简写属性animation
来同时设置这些属性,也可以分别设置每个属性。
例如,我们可以为一个按钮添加一个名为mybutton
的动画效果,让它在鼠标悬停时改变颜色、大小和阴影,并且无限循环:
button {
animation-name: mybutton;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes mybutton {
from {background-color: blue; width: 100px; box-shadow: none;}
to {background-color: green; width: 200px; box-shadow: inset 0 -5px black;}
}
button:hover {
animation-play-state: running;
}
动画的应用
CSS3动画可以应用于任何可以改变值或状态的CSS属性,比如颜色、背景、字体、边框、位置、尺寸、形状等等。我们可以利用动画来制作各种各样的交互效果,比如按钮、菜单、幻灯片、弹出框等等。下面是一些简单的示例:
按钮
我们可以为一个按钮添加一个名为mybutton2
的动画效果,让它在鼠标悬停时旋转并缩放:
button {
animation-name: mybutton2;
animation-duration: .5s;
}
@keyframes mybutton2 {
from {transform: rotate(0deg) scale(1);}
to {transform: rotate(360deg) scale(1.5);}
}
button:hover {
animation-play-state: running;
}
菜单
我们可以为一个水平菜单添加一个名为mymenu
的动画效果,让每个菜单项在鼠标悬停时向右移动并倾斜:
ul {
list-style-type:none;
}
li {
display:inline-block;
padding:10px;
background-color:#f1f1f1;
animation-name:mymenu;
animation-duration:.5s;
}
a {
text-decoration:none;
color:black;
}
@keyframes mymenu {
from {transform:none;}
to {transform:translateX(20px) skewX(20deg);}
}
li:hover {
animation-play-state:running;
}
幻灯片
我们可以为一个幻灯片添加一个名为myslide
的动画效果,让每张图片在切换时淡入淡出并缩放:
.slide {
position:relative;
width:500px;
height:300px;
overflow:hidden;
}
.slide img{
position:absolute;
top:-300px;
left:-500px;
width:auto;
height:auto;
transition:left .5s ease-in-out .5s, top .5s ease-in-out .5s, opacity .5s ease-in-out .5s, transform .5s ease-in-out .5s;
}
.slide img:first-child{
left:-500px;
top:-300px;
}
.slide:hover img{
left:-500px;
top:-300px;
}
.slide:hover img:last-child{
left:-500px;
top:-300px;
}
.slide img:nth-child(2){
left:-500px;
top:-300px;
}
.slide img:nth-child(3){
left:-500px;
top:-300px;
}
.slide img:nth-child(4){
left:-500px;
top:-300px;
}
.slide:hover img:nth-child(2){
left:-500px;
top:-300px;
}
.slide:hover img:nth-child(3){
left:-500px;
top:-300px;
}
.slide:hover img:nth-child(4){
left:-500px;
top:-300px;
}
注意点:
1.animation-timing-function:作用于一个关键帧周期而非整个动画周期
2.animation-iteration-count:只会管理动画内的属性,动画的延迟不会被循环
3.animation-direction:改变关键帧的执行方向,还会影响animation-timing-function的形式
总结
CSS3动画是一种实现元素在网页中逐渐变化样式的技术。它可以让网页的交互效果更加丰富和灵活,而不需要使用Flash或JavaScript。要创建CSS3动画,我们需要指定要添加动画效果的CSS属性和函数,以及一些控制动画细节的属性。我们可以使用不同的动画函数来定义不同时间点的状态,也可以使用多个动画函数来组合出复杂的状态。我们还可以利用动画属性来调整动画的时长、延迟、次数、方向、填充模式和播放状态。CSS3动画可以应用于任何可以改变值或状态的CSS属性,比如颜色、背景、字体、边框、位置、尺寸、形状等等。我们可以利用动画来制作各种各样的交互效果,比如按钮、菜单、幻灯片、弹出框等等。
参考资料:
(1) CSS3 动画 | 菜鸟教程. https://www.runoob.com/css3/css3-animations.html.
(2) CSS3 animation 属性 | 菜鸟教程. https://www.runoob.com/cssref/css3-pr-animation.html.
(3) CSS Animations - W3Schools. https://www.w3schools.com/css/css3_animations.asp.