CSS3-动画

最新推荐文章于 2020-12-29 14:38:21 发布

只字不留

最新推荐文章于 2020-12-29 14:38:21 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88674105

版权

一、动画与过渡
1、相同：都是用来给元素添加动画的，是系统新增的属性，都满足三要素才有效果。
2、不同：过渡必须要人为才能触发执行，动画不需要。
二、三要素
1、告诉系统需要执行哪个动画（设置一个名字）。
animation-name: name;
2、动画持续时间。
animation-duration: time;
3、变化：
@keyframes name{from{}to{}};
或者@keyframes name{0%{} 50%{} 100{}};（从0%到100%之间任意值）
三、其它属性

				/*动画延迟执行时间*/
                /*animation-delay: 3s; */
                /* 动画执行速度 */
                /* animation-timing-function: linear; */
                /* 动画播放次数 */
                /* animation-iteration-count: 2; */
                /* 是否执行往返动画
                取值：normal：默认，执行一次后回到起点在执行。
                alternate：往返执行，执行一次后往回执行一次。*/
                /* animation-direction: alternate; */
                /* 控制动画是否暂停 */
                /* animation-play-state: running; */
                (动画具有一定状态：等待、执行、结束 )
            /*
            animation-fill-mode: 指定动画等待状态和结束状态的样式。
            取值：
            none: 不做任何改变。
            backwards：元素等待状态时显示动画第一帧的样式。
            forwards：元素结束状态保持动画最后一帧的状态。
            both：backwards与forwards的结合显示。
             */

连写形式：
过渡连写：transition：过渡属性过渡时长运动速度延迟时间；
动画连写：anmition: 动画名称动画时间动画运动速度延迟时间执行次数是否往返；
四、实例：无限滚动效果

<!DOCTYPE html>
<html>
    <head>
        <title>动画属性</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            img{
                width: 300px;
                height: 150px;
            }
            div{
                width: 400px;
                height: 150px;
                margin: 100px auto;
                border: 1px solid #000;  
                overflow: hidden;
                background-color: #000;
            }
            ul{
                width: 2000px;/*浮动元素的父元素足够的空间放置浮动的图片*/
                height: 150px;
                background-color: #ccc;
                animation: move 20s linear 0s infinite normal;
            }
            ul li{
                list-style: none;
                width: 300px;
                height: 150px;
                float: left;
            }
            ul:hover{
            /*因为动画属性设置在ul上面，悬停在ul上面停止动画*/
                animation-play-state: paused;
            }
            ul:hover li{
            /*所有的li透明度变为0.5*/
                opacity: 0.5;
            }
            ul li:hover{
            /*被悬停的li透明度覆盖前面变为1*/
                opacity: 1;
            }

            @keyframes move{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1200px;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><img src="images/5.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/2.jpeg" alt=""></li>
                <!--  当图片移动到最后一张时，会有一个动画恢复的状态，
                设置后面两个图片与前两个相同会看不到这种变化。
                因为是在相同的图案上面跳转。 -->
                <li><img src="images/5.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>

只字不留

关注

0
点赞
踩
0

收藏

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

一、动画与过渡1、相同：都是用来给元素添加动画的，是系统新增的属性，都满足三要素才有效果。2、不同：过渡必须要人为才能触发执行，动画不需要。二、三要素1、告诉系统需要执行哪个动画（设置一个名字）。animation-name: name;2、动画持续时间。animation-duration: time;3、变化：@keyframes name{from{}to{}};或者@k...
复制链接

扫一扫