HTML与CSS中的动画模块

来源：趣吃美食网

这次给大家带来HTML与CSS中的动画模块，使用HTML与CSS中的动画模块注意事项有哪些，下面就是实战案例，一起来看一下。

一. 动画模块

1.过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点

过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

2 动画三要素

2.1告诉系统需要执行哪个动画
2.2告诉系统我们需要自己创建一个名称叫做lnj的动画
2.3告诉系统动画持续的时长

p{ width: 100px; 
 height: 50px; 
 background-color: red; 
 /*1.告诉系统需要执行哪个动画*/ 
 animation-name: lnj; 
 /*3.告诉系统动画持续的时长*/ 
 animation-duration: 3s; } 
 /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/ 
 @keyframes lnj { 
 from{ margin-left: 0; } 
 to{ margin-left: 500px; } 
 }

二.动画模块 - 其它属性 (上)

 p { 
 width: 100px; 
 height: 50px; 
 background-color: red; 
 animation-name: sport; 
 animation-duration: 2s; 
 /*告诉系统多少秒之后开始执行动画*/ 
 /*animation-delay: 2s;*/ 
 /*告诉系统动画执行的速度*/ 
 animation-timing-function: linear; 
 /*告诉系统动画需要执行几次*/ 
 animation-iteration-count: 3; 
 //infinite : 无限的 
 /*告诉系统是否需要执行往返动画 
 取值: normal, 默认的取值, 执行完一次之后回到起点继续执行下一次 
 alternate, 往返动画, 执行完一次之后往回执行下一次 
 */ animation-direction: alternate; } 
 @keyframes sport { 
 from{ margin-left: 0; } 
 to{ margin-left: 500px; } } 
 p:hover{ 
 /* 告诉系统当前动画是否需要暂停 
 取值: running: 执行动画,默认取值 
 paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画; 
 */ 
 animation-play-state: paused; }

三.动画模块 - 其它属性 (下)

 .box2{ 
 width: 200px; 
 height: 200px; 
 background-color: blue; 
 margin: 100px auto; 
 animation-name: myRotate; 
 animation-duration: 5s; 
 animation-delay: 2s; 
 /* 通过我们的观察, 动画是有一定的状态的 
 1.等待状态 2.执行状态 3.结束状态 */
 /* animation-fill-mode作用: 指定动画等待状态和结束状态的样式 
 取值: none: 不做任何改变 
 forwards: 让元素结束状态保持动画最后一帧的样式; 
 //向前的 
 backwards: 让元素等待状态的时候显示动画第一帧的样式; 
 // 向后的 
 both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
 */ 
 /*animation-fill-mode: backwards;*/ 
 /*animation-fill-mode: forwards;*/ 
 animation-fill-mode: both; } 
 @keyframes myRotate { 
 0%{ transform: rotate(10deg); } 
 50%{ transform: rotate(50deg); } 
 100%{ transform: rotate(70deg); } 
 } 
 animation-fill-mode

四. 动画模块-连写

1.动画模块连写格式
animation:动画名称动画时长动画运动速度延迟时间执行次数往返动画;

2.动画模块连写格式的简写
animation:动画名称动画时长;

五. 云层效果

<html lang="en"> <head> 
<meta charset="UTF-8"> <title>104-动画模块-云层效果</title> <style> 
*{ margin: 0; padding: 0; } 
ul{ height: 400px; background-color: skyblue; 
margin-top: 100px; animation: change 5s linear 0s infinite alternate; 
 position: relative; overflow: hidden; //让屏幕下方的滚动条隐藏掉 } 
 ul li{ list-style: none; width: 400%; 
 //设置li的宽度为屏幕的四倍,移动最多的为屏幕宽度的三倍,为保证屏幕内一直有云朵,故多设置一个屏幕的宽度的云朵
 height: 100%; position: absolute; 
 // 设置子绝父相后,三个li会重叠到一起 
 left: 0; top: 0; } ul li:nth-child(1){ 
 background-image: url("images/cloud_one.png"); 
 animation: one 30s linear 0s infinite alternate; } 
 ul li:nth-child(2){ background-image: url("images/cloud_two.png"); 
 animation: two 30s linear 0s infinite alternate; } 
 ul li:nth-child(3){ background-image: url("images/cloud_three.png"); 
 animation: three 30s linear 0s infinite alternate; } 
 @keyframes change { 
 from{ background-color: skyblue; } 
 to{ background-color: black; } } 
 @keyframes one { 
 from{ margin-left: 0; } 
 to{ margin-left: -100%; 
 //如果先往右移动,又出现屏幕上有一节没云朵的情况,故先往左移动; 
 } } 
 @keyframes two { 
 from{ margin-left: 0; } 
 to{ margin-left: -200%;
 //由于动画的时间都一样,但是运动的距离不一样,又由于都是线性速度,所以就会出现有点运动快,有的运动慢!
 } } 
 @keyframes three { from{ margin-left: 0; } 
 to{ margin-left: -300%; } } 
 </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>

六. 无限滚动

<html lang="en"> <head> <meta charset="UTF-8"> <title>105-动画模块-无限滚动</title> 
<style> *{ margin: 0; padding: 0; } 
 p{ width: 600px; height: 188px; border: 1px solid #000; 
 margin: 100px auto; overflow: hidden; } ul{ width: 2000px; 
 //这个无限滚动原理就是ul做动画 
 height: 188px; background-color: black; 
 //背景颜色黑色,当li的透明度为半透明时,li就会有黑色蒙版效果 
 animation: move 10s linear 0s infinite normal; 
 //name 时间 速度 延时 无限重复 是否往返(normal代表不往返)
 } 
 ul li{ float: left; list-style: none; width: 300px;
 height: 188px; background-color: red; 
 border: 1px solid #000; box-sizing: border-box; }
 ul:hover{ 
 /*动画添加给谁, 就让谁停止*/ 
 animation-play-state: paused; } 
 ul:hover li{ opacity: 0.5; 
 //当li的透明度为0.5时,就会看到父元素的背景颜色(黑色),就会有蒙版效果
 } 
 ul li:hover{ opacity: 1; 
 //透明度为1,不透明,看不到父元素的背景色,故没有蒙版效果
 } @keyframes move { 
 from{ margin-left: 0; } 
 to{ margin-left: -1200px;
 //只需要移除屏幕4个li的宽度就可. 屏幕上就会显示第5.6两个li,这时,原本的动画就会恢复的原来的位置接着动画,实现了无线滚动效果 
 } } </style> </head> <body> <p> <ul> 
 <li>![](images/banner1.png)</li> <li>![](images/banner2.jpg)</li> 
 <li>![](images/banner3.jpg)</li> <li>![](images/banner4.jpg)</li> 
 //把前两个li加在后面,起到过度效果;动画不会显得太生硬. 
 <li>![](images/banner1.png)</li> <li>![](images/banner2.jpg)</li> 
 </ul> </p> </body> </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

HTML与CSS中的动画模块