CSS3动画

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.