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

            /* Specifies the name of the @keyframes animation. * /
            animation-name:myfirst;
            /* Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default is 0. * /
            animation-duration:5s;
            /* Specifies the speed curve of the animation. The default is "ease". * /
            animation-timing-function:linear;
            /* Specifies when the animation should start. The default is 0. * /
            animation-delay:2s;
            /* Specifies the number of times the animation is played. The default is 1. * /
            animation-iteration-count:infinite;
            /* Specifies whether the animation is played backwards in the next cycle. The default is "normal". * /
            animation-direction:alternate;
            /* Specifies whether the animation is running or paused. The default is "running". * /
            animation-play-state:running;

            /* As with the above animation, you can use the shorthand animation property */
            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">To see the transition, place your mouse pointer over the yellow div element.</div>
<input type="button" id="mybutton" value="click">
<script>
    // Use js to trigger 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>
Copy the code

\