animation屬相詳解 - @keyframes 用法 -animation案列- @keyframes 案列

時間 2019-12-09

標籤 animation 屬相詳解 keyframes 用法简体版

原文原文鏈接

animation屬相詳解 - @keyframes 用法 -animation案列- @keyframes 案列

一個完整的css animations 是由倆部分組成的：css

定義動畫的關鍵幀（運行方式）
該動畫的聲明

@keyframes

css3 中@keyframes 是用來建立動畫的，他能夠設置多少幀，每一個關鍵幀表示動畫過程的一個狀態。html

語法格式：css3

@keyframes animationName{
        keyframes-selector{css-styles}
    }

animationsName 表示動畫的名稱，他將做爲惟一標識！
keyframes-selector{css-styles}是關鍵幀選擇器！即當前關鍵幀要應用到整個動畫過程當中位置的一個百分比！ from 或者 to! from 表明 0% to 表明100%！
css-style 定義執行到當前動畫幀時，要執行的對應的動畫狀態！
以上三個都是必須的 缺一不可

animation屬相

animation 屬相描述動畫的 css 聲明，包括指定具體動畫以及動畫時長等行爲！函數

語法格式動畫

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

屬相	描述
animation	規定@keyframes 動畫的名稱	keyframe-name	規定須要綁定到選擇器的 keyfram 的名稱
animation	規定@keyframes 動畫的名稱	none	規定無動畫效果（可用來覆蓋級聯的動畫）
animation-duration	規定動畫完成一個週期所須要花費時間	time 值	以秒或者毫秒計算，默認是0
animation-timing-function	規定動畫運動的曲線	linear	動畫從頭至尾速度是相同的
		ease	默認值。動畫以低速開始，而後加快，在結束以前變慢。
		ease-in	動畫以低速開始
		ease-out	動畫以低速結束
		ease-in-out	動畫以低速開始和結束
		cubic-bezier(n,n,n,n)	在cubic-bezier 函數中定義本身的值。可能的值是 0 到 1 的數值
animation-delay	規定動畫開始時的延遲，可選	time 值	以秒或者毫秒計算，默認是0
animation-iteration-count	規定動畫被播放的次數	n	定義動畫被播放的次數，默認是 1
animation-iteration-count	規定動畫被播放的次數	infinite	規定動畫無限次循環
animation-direction	規定動畫是否在下個週期，逆向播放	normal	默認值，動畫默認播放
animation-direction	規定動畫是否在下個週期，逆向播放	alternate	動畫會輪流反向播放
animation-play-state	規定動畫是否正在運行，或者暫停	running	默認值，規定動畫正在播放
animation-play-state	規定動畫是否正在運行，或者暫停	paused	規定動畫已暫停
animation-fill-mode	規定對象動畫時間以外的狀態	none	不改變默認行爲
		forwards	當動畫完成後，保持最後一個屬相值（在最後一個關鍵幀中定義）
		backwards	在animation-delay所指定的一段時間內，在動畫顯示以前，應用開始屬相（在第一個關鍵幀中定義）
		both	向前和向後填充模式都被應用

簡單案列

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css 動畫</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#f7f7f7;
        }
        .box{
            width: 400px;
            margin:100px auto;
            animation: rotate 4s linear infinite;
        }
        img{
            display: block;
        }
        @keyframes rotate {
            from {
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(-360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/fengche.png" alt="">
    </div>
</body>
</html>

相關標籤/搜索

keyframes

animation

model&animation

android.support.v4.animation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。