CSS动画
CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash!
动画浏览器支持
IE10+支持该属性的。其他低浏览器版本数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
什么是CSS动画?
动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画,必须首先为动画指定一些关键帧。关键帧保持元素在特定时间具有的样式。
@keyframes规则
在@keyframes规则中指定CSS样式时,动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效,必须将动画绑定到元素。以下示例将“example”动画绑定到
元素。动画将持续4秒,并且会逐渐将
元素的背景颜色从“红色”更改为“×××”:
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 要将动画应用到的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
注意:该animation-duration属性定义动画完成所需的时间。如果animation-duration未指定该属性,则不会发生动画,因为默认值为0(0秒)。 在上面的示例中,我们通过使用关键字“from”和“to”(表示0%(开始)和100%(完成))指定样式何时更改。也可以使用百分比。通过使用百分比,您可以根据需要添加任意数量的样式更改。当动画完成25%,完成50%时,以及动画100%完成时,以下示例将更改
元素的背景颜色:
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
/* 动画代码 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* 将动画应用到元素 */
div {
width: 100px;
height: 100px;
backgr