animation動畫
動畫名稱、時間、曲線、延遲、播放次數(shù)、結束后是否返回、動畫前后的狀態(tài)
infinite不限制次數(shù)
alternate動畫結束后返回，返回也算次數(shù)
animation-fill-mode 動畫前后的狀態(tài)
forwards動畫完成保持在最后一幀
backwards在延遲時間內(nèi)，在動畫顯示之前，應用from開始屬性值（例如box寬100，from寬200，在延遲1s內(nèi)顯示200）
both向前和向后填充模式都被應用（例如起始按200，結束停在最后一幀
動畫運行animation-play-state: running
動畫暫停animation-play-state: paused
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>animation動畫</title>
? <style type="text/css">
? ? ? .box{
? ? ? ? ? width: 100px;
? ? ? ? ? height: 100px;
? ? ? ? ? background-color: gold;
? ? ? ? ? animation: moving 1s ease 1s 5 alternate both;
? ? ? ? ? /*動畫暫停*/
? ? ? ? ? /*animation-play-state: paused;*/
? ? ? }
? ? ? .box:hover{
? ? ? ? ? /*動畫運行*/
? ? ? ? ? /*animation-play-state: running;*/
? ? ? }
? ? ? /*定義一個動畫，名稱為moving*/
? ? ? @keyframes moving{
? ? ? ? ? /*初始狀態(tài)*/
? ? ? ? ? from{
? ? ? ? ? ? ? width: 200px;
? ? ? ? ? }
? ? ? ? ? /*結束狀態(tài)*/
? ? ? ? ? to{
? ? ? ? ? ? ? width: 500px;
? ? ? ? ? }
? ? ? }
? </style>
</head>
<body>
? <div class="box"></div>
</body>
</html>
多幀動畫
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>多幀動畫</title>
? ? <style type="text/css">
? ? ? ? .box{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: gold;
? ? ? ? ? ? margin: 50px auto 0;
? ? ? ? ? ? animation: moving 1s ease 1s both;
? ? ? ? }
? ? ? ? @keyframes moving{
? ? ? ? ? ? 0%{
? ? ? ? ? ? ? ? /*位移動畫*/
? ? ? ? ? ? ? ? transform: translateY(0px);
? ? ? ? ? ? ? ? background-color: cyan;
? ? ? ? ? ? }
? ? ? ? ? ? 50%{
? ? ? ? ? ? ? ? transform: translateY(400px);
? ? ? ? ? ? ? ? background-color: gold;
? ? ? ? ? ? ? ? border-radius: 0px;
? ? ? ? ? ? }
? ? ? ? ? ? 100%{
? ? ? ? ? ? ? ? transform: translateY(0px);
? ? ? ? ? ? ? ? background-color: red;
? ? ? ? ? ? ? ? border-radius: 50px;
? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box"></div>
</body>
</html>
