<!DOCTYPE html>
<html>
<head>
    <style>
        .my-animation
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;

            /*  规定 @keyframes 动画的名称。 */
            animation-name:myfirst;
            /*  规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
            animation-duration:5s;
            /*  规定动画的速度曲线。默认是 "ease"。*/
            animation-timing-function:linear;
            /*  规定动画何时开始。默认是 0。*/
            animation-delay:2s;
            /*  规定动画被播放的次数。默认是 1。*/
            animation-iteration-count:infinite;
            /*  规定动画是否在下一周期逆向地播放。默认是 "normal"。*/
            animation-direction:alternate;
            /*  规定动画是否正在运行或暂停。默认是 "running"。*/
            animation-play-state:running;

            /*  与上面的动画相同，可以使用了简写的动画 animation 属性*/
            animation:myfirst 5s linear 2s infinite alternate;
        }

        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }


        .my-transition
        {
            margin-top: 200px;
            width:100px;
            height:100px;
            background:yellow;
            /*
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 1s;
            */
            transition:width 2s linear 1s, height 2s linear 1s, transform 2s linear 1s;
        }

        /*  伪类触发包含 :hover : focus  :checked  :active  */
        .my-transition:hover
        {
            width:200px;
            height:200px;
            transform:rotate(180deg);
        }
        .my-click-transiton
        {
            width:250px;
            height:250px;
            transform:rotate(270deg);
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>

<div class="my-animation"></div>
<div class="my-transition">请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>
<input type="button" id="mybutton" value="click">
<script>
    //用js触发CSS3-transition过渡动画
    $('#mybutton').click(function () {
        var myTransition = $('.my-transition');
        if (myTransition.hasClass('my-click-transiton')) {
            myTransition.removeClass('my-click-transiton')
        } else {
            $('.my-transition').addClass('my-click-transiton');
        }
    });
</script>
</body>
</html>

CSS3动画 animation transition_html