animation-play-state 属性——动画示例
- 2019 年 11 月 26 日
- 筆記
用途
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
语法
/* Single animation */ animation-play-state: running; a nimation-play-state: paused; /* Multiple animations */ animation-play-state: paused, running, running; /* Global values */ animation-play-state: inherited; animation-play-state: initial; animation-play-state: unset;
值
|
值 |
描述 |
|---|---|
|
running |
动画正在运行。 |
|
paused |
动画已暂停。 |
例子
默认设定值paused，鼠标移动到例子上，状态值修改为running。
/* HTML */ <div class="box"> <div class="container-box"> <div class="el top"></div> <div class="el right"></div> <div class="el left"></div> <div class="el bottom"></div> </div> </div> /* CSS */ @keyframes top { 15% { transform: translate(0, 0) rotate(0);} 60% { transform: translate(-30px, -30px) rotate(20deg);} 100% { transform: translate(0, 0) rotate(90deg); } } @keyframes right { 15% { transform: translate(0, 0) rotate(0);} 60% { transform: translate(30px, -30px) rotate(-20deg); } 100% { transform: translate(0, 0) rotate(-90deg);} } @keyframes left { 15% { transform: translate(0, 0) rotate(0);} 60% { transform: translate(-30px, 30px) rotate(-20deg);} 100% { transform: translate(0, 0) rotate(-90deg);} } @keyframes bottom { 15% { transform: translate(0, 0) rotate(0);} 60% { transform: translate(30px, 30px) rotate(20deg);} 100% { transform: translate(0, 0) rotate(90deg);} } .box { position: relative; width:200px; height:100px; } .box .container-box { position: absolute; background: #b2dbfb; width: 60px; height: 60px; left: 50%; margin-left: -30px; top: 50%; margin-top: -30px; transform: rotate(45deg); cursor: pointer; } .box .container-box:hover .el { animation-play-state: running; } .box .container-box .el { display: inline-block; width: 30px; height: 30px; background: #2196F3; margin: -3px; border: 2px solid #2196F3; border-radius: 2px; } .box .container-box .top { animation: top 1s linear infinite; animation-play-state: paused; } .box .container-box .right { animation: right 1s linear infinite; animation-play-state: paused; } .box .container-box .left { animation: left 1s linear infinite; animation-play-state: paused; } .box .container-box .bottom { animation: bottom 1s linear infinite; animation-play-state: paused; }
执行结果
