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);
        }
    }