CSS3动画

最新推荐文章于 2024-04-16 00:12:34 发布

Simple_IDE

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量89

点赞数

分类专栏： HTML 文章标签： css3

本文链接：https://blog.csdn.net/simple5960/article/details/108564088

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        div
        {
            width: 200px;
            height: 200px;
            background-color:red;
            position: absolute;
            /*  animation-name: ;
            1.先将动画制作好，然后加到某个元素上面去
                通过关键帧@keyframes制作动画
             */
            animation-name:moveTest ;
            /* 2.设置动画的总耗时 */
            animation-duration: 2s;
            /* 3.还可以设置动画的播放次数,默认一次,infinite无限次 */
            animation-iteration-count: 2;
            /* 4.还可以设置交替动画 
            alternate：从结束到开始
            */
            /* animation-direction: alternate; */
            /* 5.还可以设置动画的延迟 */
            animation-delay: 2s;
            /* 6.设置动画结束的状态,默认回到原始状态 
            forwards:设置动画结束的状态
            backwards:不会保持动画结束状态，在有延迟情况下。如果动画有初始状态会计算出初始状态
            */
            animation-fill-mode: backwards;
            /* 7.设置动画时间函数 动画的快慢 */
            animation-timing-function: linear;
            /* /8.设置动画的播放状态 */
            /* animation-play-state: running; */

        }
        
        @keyframes moveTest{
            /* 整个动画耗时的百分比  */
            0%{
                transform: translate(0,0) rotate(30deg);
            }
            30%{
                transform: translate(500px,0);
            }
            60%{
                transform: translate(500px,500px);
            }
            100%{
                transform: translate(0px,500px);
            }
        }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="run" id="run">
    <input type="button" value="pause" id="pause">
</body>
<script>
    var div=document.querySelector("div")
    document.querySelector("#run").onclick=function(){
        div.style.animationPlayState="running"
    }
    document.querySelector("#pause").onclick=function(){
        div.style.animationPlayState="paused"
    }

</script>
</html>```

Simple_IDE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫