|
|
@@ -0,0 +1,63 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: red;
|
|
|
+ margin:100px auto;
|
|
|
+ /* animation 定义动画 */
|
|
|
+ /* 第一个参数为动画名称 第二个参数持续的时间 第三个参数动画效果 */
|
|
|
+ /* 动画默认情况下结束后会返回初始状态 */
|
|
|
+ /* 如果添加第四个值为forwards 停在结束状态 */
|
|
|
+ /* 第五参数为动画需要执行的次数 infinite 表示无限执行*/
|
|
|
+ /* animation: foo 1s linear forwards infinite; */
|
|
|
+ /* animation-name 动画名称 */
|
|
|
+ animation-name: foo;
|
|
|
+ /* animation-duration 持续时间 */
|
|
|
+ animation-duration: 1s;
|
|
|
+ /* animation-timing-function 动画效果 */
|
|
|
+ animation-timing-function: linear;
|
|
|
+ /* animation-fill-mode 动画结束时的状态 */
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ /* animation-iteration-count 动画执行的次数 */
|
|
|
+ animation-iteration-count: 2;
|
|
|
+ /* animation-delay 动画延时 */
|
|
|
+ animation-delay: 1s;
|
|
|
+ }
|
|
|
+ .box:hover{
|
|
|
+ /* animation-play-state:paused 控制动画暂停 */
|
|
|
+ animation-play-state: paused;
|
|
|
+ }
|
|
|
+ /* keyframes 定义动画关键帧 后面为定义的名称 */
|
|
|
+ /* from 从什么状态开始 to 到什么样状态 */
|
|
|
+ @keyframes foo{
|
|
|
+ /* from{
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ to{
|
|
|
+ width: 400px;
|
|
|
+ } */
|
|
|
+ 0%{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ 50%{
|
|
|
+ width: 600px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ 100%{
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box"></div>
|
|
|
+</body>
|
|
|
+</html>
|
