css3 動畫效果實現

前沿

在工做中，常常有一些須要切換的交互樣式。若是直接在兩種狀態之間切換，就顯得有點生硬。加上一些動畫效果就會好不少。

示例1：點擊的三角切換

實現過程

• 第一步實現這個三角形
  用的svg 的多邊形畫法

<svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width=14
            height=7
        >
            <polygon
                points="0,0 14,0 7,7"
                style={{ fill: '#999', stroke: '#999', strokeWidth: 1 }}
            />
        </svg>

• 第二步實現動畫效果
  css3 的animation: 自定義的每幀動畫效果 時間；
  使用@keyframs 定義每幀的動畫效果
  能夠只定義最初的狀態from, 和最終的狀態to；也能夠定義每一個時間節點的狀態，好比：10%（通過10%時間的時候） ， 50%（通過50%時間的時候）

animation: up 0.5s;
    @keyframs up {
        from {
            transform: rotate(0deg); 
        }
        to {
            transform: rotate(180deg);
        }
    }