24动画-动画——HTML

最新推荐文章于 2024-07-24 14:20:14 发布

StudiousTiger

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量268

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168926

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!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>
        /* 
            动画：
                动画可以自动触发动态效果
                设置动画效果，必须要选设置关键帧
                @keyframes 名字{ 
                    from()   from表示动画的开始位置，也可以用0%
                    to{}     to表示动画的结束位置，也可以用100%
                }
                
            
            animation-name: name;   填写关键帧的名字 

            animation-duration: 2s; 动画的持续时间  

            animation-delay: 1s; 动画的延时 

            animation-timing-function: ease-in; 动画的时序函数 
                可选值：
                            ease            默认值，慢->快->慢
                            linear          匀速运动
                            ease-in         加速运动 慢->快
                            ease-out        减速运动  快->慢
                            ease-in-out     先加速，再减速
                            cubic-bezier()  来制定时序函数
                                辅助网站：https://cubic-bezier.com
                            steps(n) 分步执行过渡效果,n是分步的次数
                            steps(n，y) 分步执行过渡效果,n是分步的次数
                                y的可选值：
                                    end  在时间结束时执行过渡效果（默认）
                                            比如:10s完成过渡，设置steps(5，end)，那么就会第5s执行一次，第10s执行一次
                                    start 在时间开始时执行过渡效果
                                            比如:10s完成过渡，设置steps(5，start)，那么就会第0s执行一次，第5s执行一次

            animation-iteration-count:1;  动画执行的次数， 
                可选值：
                    数字
                    infinite（无限）表示无限
            
            animation-direction: normal; 动画执行的方向  
                可选值：
                    normal  默认值（form->to）
                    reverse  从to->from
                    alternate  从from->to，但是重复执行时形成连贯性
                    alternate-reverse  从to->from，但是重复执行时形成连贯性

            animation-play-state: running;  设置动画的执行状态
                可选值：
                    running  动画执行（默认）
                    paused   动画暂停

            animation-fill-mode: none;  动画的填充模式
                可选值：
                    none (默认)  动画执行完之后，回到初始位置
                    forwords（向前）     动画执行完毕后，停止在结束（to）的位置
                    backwords（向后）    动画处于延迟等待时，元素就会处于（from）开始位置
                                    例如：
                                        元素的background-color:black，且动画开始延迟量两秒
                                        @keyframes name{
                                            from{background-color:red;}
                                            to{background-color:blue;}
                                        }
                                        若设置animation-fill-mode: backwords;则开始时，元素就会是red
                                        反之，2s后元素才会是red
                    both        结合了forwords和backwords两种特点
         */
         
        .box1{
            width: 1300px;
            height: 500px;
            background-color: silver;
            overflow: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(236, 154, 47);
            margin-left: 0;
            margin-top: 50px;
            /* 填写关键帧的名字 */
            animation-name: name;
            /* 动画的持续时间 */
            animation-duration: 0.5s;
            /* 动画的延时 */
            animation-delay: 0s;
            /* 动画的时序函数 */
            animation-timing-function: ease-in;
            /* 执行的次数 */
            animation-iteration-count: 5;
            /* 执行的方向 */
            animation-direction: alternate;
            /* 动画的填充模式 */
            animation-fill-mode: none;

        }
        /* 关键帧 */
        @keyframes name {
            /* from表示动画的开始位置，也可以用0% */
            from{
                margin-left: 0;  
            }
            /* to表示动画的结束位置，也可以用100% */
            to{
                margin-left: 1200px;
            }
        }
        .box1:hover div{
            /* 鼠标移入时，动画暂停 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24动画-动画——HTML

<!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> /* 动画
复制链接

扫一扫

专栏目录