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

        }

    }