元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
<head> <meta charset="UTF-8"> <title>animation</title> <style type="text/css"> .box{ width:100px; height: 100px; background: #5cBE3E; /*定义动画的名称*/ animation-name:fromLeftToRight; /*定义动画时间*/ animation-duration:3s; /*定义动画的过渡速度*/ animation-timing-function : ease-in; /*定义动画的延时时间*/ animation-delay : 1s; /*定义动画的顺序 normal：正常方向reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行alternate-reverse：动画先反运行再正方向运行并持续交替运行 */ animation-direction : alternate; /*定义动画的执行次数 infinite表示无数次，其他可以写数字表示多少次*/ animation-iteration-count:infinite; } /* 定义动画 关键帧*/ @keyframes fromLeftToRight{ from{ margin-left: 0; } to{ margin-left: 100px; } } </style> </head> <body> <div class="box"></div> </body> </html>
上课内容中这个导航下拉隐藏很好用，在网页中很实用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>daohang</title> <style type="text/css"> .d1{ width: 100px; height: 40px; line-height:40px; text-align: center; background:green; border-radius: 10px; overflow: hidden;/* 超出隐藏 */ } .d1:hover{ /* 定义动画名字 */ animation-name:slidedown; /* 动画时间 */ animation-duration:1s; /* 动画的过渡速度 */ animation-time-function:ease-in-out; /*设置动画结束时的状态*/ animation-fill-mode:forwards; /* 动画执行的次数 */ animation-iteration-count:1; /* 动画开始执行的延迟时间 */ animation-delay:.3s; } .d1 a{ font-size: 18px; color: white; font-family: "微软雅黑"; text-decoration: none; } .d1 ul{ background-color: #313a28; list-style-type: none; margin: 0; padding: 0; } @keyframes slidedown{ from{ height: 40px; } to{ height: 230px; } } </style> </head> <body> <div class="d1"> <a href="">导航</a> <ul> <li><a href="">新闻</a></li> <li><a href="">娱乐</a></li> <li><a href="">电影</a></li> <li><a href="">音乐</a></li> </ul> </div> </body> </html>
/*定义动画的状态 running：运动 paused：暂停 */
.box:hover{
animation-play-state:paused;
}
animation(动画复合属性)
div{
-webkit-animation: FromLeftToRight 2s ease-out forwards;
animation: FromLeftToRight 2s ease-out forwards;
}