码迷,mamicode.com
首页 > Web开发 > 详细

css动画

时间:2021-06-28 18:13:40      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:orm   ini   动画   inf   size   count   direct   back   UNC   

 <style>
        /* 定义名称为zhuan的动画 */
        @keyframes zhuan {
            0% {
                transform: translate(0, 0);
            }
            /* 水平移动 */
            30% {
                transform: translate(600px, 0);
            }
            /* 放大x,y 2倍*/
            50% {
                transform: scale(2, 2);
            }
            /* 旋转45度 */
            70% {
                transform: rotate(180deg);
                /* 设置旋转中心为y轴中点 */
                transform-origin: 0 50%;
            }
            100% {
                transform: translate(1500px, 800px);
            }
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            animation: zhuan;
            /* 动画持续时间 */
            animation-duration: 10s;
        }
    </style>

动画属性

 div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            animation-name: zhuan;
            /* 动画持续时间 */
            animation-duration: 10s;
            /* 动画style */
            animation-timing-function: ease-in;
            /* 延迟触发 */
            animation-delay: 2s;
            /* 设置动画原路返回 */
            animation-direction: alternate;
            /* 设置动画次数为无限次 */
            animation-iteration-count: infinite;
            /* 设置动画不会返回 */
            animation-fill-mode: forwards;
        }
        
        div:hover {
            /* 动画暂停 */
            animation-play-state: paused;
        }

css动画

标签:orm   ini   动画   inf   size   count   direct   back   UNC   

原文地址:https://www.cnblogs.com/limakilo/p/14933356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!