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