在CSS中实现动画所需的所有知识
CSS是使网页具有交互性的最强大的方法之一。
它改变了我们基本HTML网页的外观。
CSS提供的重要且令人兴奋的函数之一就是它使我们能够执行动画。
它允许我们在页面中移动元素。
CSS中的动画
将动画添加到我们的是一种吸引用户注意力的好方法。
它不仅为我们的页面增加了价值，而且丰富了用户体验。
CSS中的动画是基于两个部分构建的。
他们是
关键帧
动画片
所有浏览器均支持CSS动画。
但是，某些较旧的浏览器，例如Safari(版本8.0以上)需要使用前缀(-webkit-)来解释动画属性。
例如：
<html>
<head>
<style>
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
-webkit-animation-name: cssanim; /* old browsers */
-webkit-animation-duration: 5s; /* old browsers */
animation-name: cssanim;
animation-duration: 5s;
}
/* old browsers */
@-webkit-keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}
</style>
</head>
<body>
<div class="anim"></div>
</body>
</html>
我们可以使用上面的示例html页面，并替换样式标签中CSS代码以尝试其他示例。
CSS中的关键帧
这是CSS中动画的构建块。
它用来在我们的网页上定义动画的特定时刻和样式。
换句话说，当我们在CSS中指定@keyframes时，它将获得将当前状态修改为新状态或者为对象设置动画的控件。
@keyframes需要具有某些属性来控制动画，例如动画的名称，阶段和属性。
名称每个动画都必须有一个名称来描述其行为。
阶段阶段表示动画的完成。可以使用" to"和" from"关键字或者以百分比来表示，而0％表示动画的开始状态，而100％表示动画的结束状态。使用百分比表示法的好处是我们可以在之间定义多个中间阶段：例如，动画在50％阶段或者75％阶段的行为应该是什么。属性这些属性使我们可以控制@keyframes在动画过程中对其进行操作。
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 5s;
}
@keyframes cssanim {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
}
}
现在，既然我们很清楚定义关键帧了。
让我们探索动画属性，以描述如何为元素和对象设置动画。
例如，两个属性：inherit和initial可与所有动画类型一起使用。
这些属性通常与div标签一起使用，以表现出不同的行为。
initial：将此属性设置为其默认值。
继承：从其父元素继承此属性。
动画属性
- 动画名称
它指定动画的名称，在@keyframes中使用该名称进行操作。
可能的值为：
名称：此名称指定要绑定到动画关键帧的名称。
none：这是默认值，可用于覆盖继承或者级联的动画。
语法： animation-name: name | none | initial | inherit;
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 5s;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}
- 动画时间
它指定动画完成一次执行所花费的时间。
它以秒或者毫秒(例如4s或者400ms)为单位定义。
此属性的默认值为0s，因此，如果未指定此属性，则动画将不会发生。
语法： animation-duration: time;
.anim {
height: 200px;
width: 200px;
background: blue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 4s;
}
@keyframes cssanim {
0% {
transform: scale(0.4);
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 1;
}
100% {
transform: scale(1);
}
}
- 动画延迟
animation-delay属性允许我们指定动画的延迟。
它定义了动画序列何时开始执行。
此属性的值可以以秒或者毫秒为单位声明。
它可以同时包含正值和负值。
正值表示动画将在经过指定的时间后开始播放，直到此时间将保持动画状态。
另一方面，负值将立即从该点开始动画，就好像它已经在指定的时间范围内执行一样。
语法： animation-delay: time;
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 4s;
animation-delay: 4s;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 250px;}
}
- 动画迭代次数
此属性指示应播放动画序列的次数。
该属性的默认值为1.
可能的值为：
number表示迭代次数
无限表示动画应永远重复
语法： animation-iteration-count: number | infinite;
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-iteration-count: 4;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 100px;}
}
- 动画方向
它定义了动画的方向。
元素的方向可以设置为向前，向后或者交替播放。
该属性的默认值是正常的，并且在每个周期都会重置。
可能的值为：
正常这是默认行为，动画将向前播放。在每个循环之后，动画将返回其初始状态并再次播放
反向动画向后播放。在每个循环之后，动画将到达其结束状态并向后播放
交替例如，动画的方向是相反的：在每个循环中，动画先播放，然后播放。每个奇数周期均呈现前向动画，而每个偶数周期均呈现向后运动。
alter-reverse交替改变动画的方向。在此，动画在每个循环中先向后播放，然后向前播放。每个奇数循环都将向后或者向后移动，而每个偶数循环都将使动画向前。
语法： animation-direction: normal | reverse | alternate | alternate-reverse;
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 100px;}
}
- 动画定时函数
此属性确定动画的速度曲线或者运动样式。
分配它是为了使动画样式从一种形式平稳地更改为另一种形式。
如果未分配任何值，则默认为缓解。
动画定时函数的可能值为：
ease这是属性的默认值。其中动画开始缓慢，在中间逐渐变快，然后又缓慢结束。
线性动画在整个循环中保持相同的速度，例如：从开始到结束。
缓入动画开始缓慢。
缓出动画缓慢结束。
渐入渐出动画在开始和结束期间均会缓慢移动。
cube-bezier(n，n，n，n)此高级函数使我们可以通过定义自己的值来创建自定义计时函数。可能的范围是0到1.
语法： animation-timing-function : linear | ease | ease-out | ease-in | ease-in-out | cubic-bezier(n,n,n,n) ;
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-direction: reverse;
}
@keyframes cssanim {
0% {background: orange; left: 0px;}
50% {background: yellow; left: 200px; top: 200px;}
100% {background: blue; left: 100px;}
}
- 动画填充模式
这是一个特殊属性，因为它在播放动画之前或者之后确定动画样式。
默认情况下，元素的样式在开始或者结束之前不受动画的影响。
此属性很有用，因为它有助于覆盖动画的此默认行为。
以下是animation-fill-mode属性的可能值：
none这是属性的默认值，例如：动画样式在动画之前或者之后不应用于元素。
将样式保留在最终动画序列中的元素中，例如：动画完成后。
向后样式由元素保留在初始动画序列中，例如：在动画开始前，尤其是在动画延迟期间，开始注视。
both这表示动画将在两个方向上都遵循，例如：向前和向后
语法： animation-fill-mode: none | forwards | backwards | both;
.anim {
width: 50px;
height: 50px;
background: lightblue;
color: white;
font-weight: bold;
position: relative;
animation-name: cssanim;
animation-duration: 5s;
animation-iteration-count: infinite;
border-radius: 100%
}
#anim1 {animation-timing-function: ease;}
#anim2 {animation-timing-function: linear;}
#anim3 {animation-timing-function: ease-in;}
#anim4 {animation-timing-function: ease-out;}
#anim5 {animation-timing-function: ease-in-out;}
@keyframes cssanim {
from {left: 0px;}
to {left: 400px;}
}
- 动画播放状态
此属性指定动画处于播放或者暂停状态。
同样，当动画从暂停中恢复时，它从其离开的位置开始。
可能的值为：
在运行中渲染动画
已暂停使动画处于暂停状态。
语法： animation-play-state: paused | playing;
.anim {
width: 100px;
height: 100px;
background: lightblue;
position: relative;
animation-name: cssanim;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
border-radius: 100%;
}
@keyframes cssanim {
0% {top: 0px; background-color: orange;}
50% {top: 0px; background-color: green;}
100% {top: 100px;background-color: blue; }
}
- 动画片
这称为动画速记属性。
用于更清洁的代码。
一旦我们习惯了所有动画属性，建议我们使用动画速记来更快地编码并在一行中定义所有属性。
语法：
动画：[动画名称] | [动画持续时间] | [动画定时函数] | [动画延迟] | [animation-iteration-count] | [动画方向] | [动画填充模式] | [动画播放状态]；
我们可以通过使用简写动画属性来获得上面使用不同的动画属性显示的所有动画效果。
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-direction: normal;
animation-play-state: paused;
}
@keyframes cssanim {
0% {background: orange; top: 0px;}
50% {background: yellow; left: 200px; top: 200px;}
100% {background: blue; left: 100px;}
}
