css3动画的过渡

最新推荐文章于 2023-07-20 16:25:52 发布

舞空~

最新推荐文章于 2023-07-20 16:25:52 发布

阅读量243

点赞数 1

分类专栏： CSS3 HTML5 jq 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44011751/article/details/107488488

版权

HTML5 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS3

10 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

效果图:
在这里插入图片描述

在这里插入图片描述
右边是动画,左边是过渡,过渡需要提前设置好过渡的样式,时间,速率等等属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2D的过渡</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            background-color: black;
        }

        section:nth-child(1) {
            /* from 设置容器过渡的初始状态*/
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: yellow;
            margin-top: 50px;

            /*让圆下降*/
            /*transition过渡，是2D动画中的一个复合属性，
            包括transition-property（属性），
            transition-timing-function（动画执行的速率），
            transition-duration（动画执行的时间\间隔\周期,以秒s为单位），
            transition-delay（动画延迟的时间,以秒s为单位）*/

            /*transition-property过渡属性，填写即将要做样式转换的属性，高度、颜色、距离等等*/
            transition-property: background-color, margin-top, width, height;
            /*通过all来代表所有属性都可以执行过渡效果*/
            transition-property: all;
            /*动画开始到动画结束间隔3s*/
            transition-duration: 5s;
            /*动画执行后延迟1s才开始动画，动画结束后也会延迟1秒回到原状态*/
            transition-delay: 1s;
            /*速率：linear匀速*/
            transition-timing-function: linear;
        }

        /*当鼠标长按容器时，使得容器处于活跃状态下，就会执行以下样式*/
        section:nth-child(1):active {
            /*to 过渡的结束状态*/
            background-color: orangered;
            margin-top: 500px;
            width: 50px;
            height: 50px;
        }

        /*第二个容器：位于右侧、设置宽高、背景颜色*/
        section:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /*定位*/
            position: absolute;
            top: 50px;
            right: 50px;

            /*动画animation*/
            /*1动画的名字*/
            animation-name: DownDown;
            /*2动画的时间*/
            animation-duration: 3s;

            /*3动画速率 默认ease慢-块-慢   linear匀速*/
            animation-timing-function: linear;
            /*4动画次数 默认是1次   infinite 无限次数*/
            animation-iteration-count: infinite;
            /*5动画延迟 动画执行后延迟2s后才开始动画*/
            /*animation-delay: 2s;*/
            /*6设置动画的运动方向，alternate该属性让容器以动画的形式原路返回*/
            animation-direction: alternate;
            /*将5句话合成一句话*/
            /*alternate动画交替，让动画原路返回*/
            animation: DownDown 3s linear infinite alternate;
        }

        /*执行动画规则@keyframes + 动画的名称 */
        @keyframes DownDown {
            from {
                /*动画的初始状态*/
                transform: translate(0, 0) scale(0);
            }

            to {
                /*动画的结束状态*/
                transform: translate(0, 500px) scale(0.5);
            }
        }
    </style>
</head>

<body>
    <section class="aa"></section>
    <section></section>
    <div style="text-align: center;">
        <button class="btn" onclick="my()">点点</button>
    </div>
</body>
<script>
    function my(){
        console.log('哈哈哈');
        $('.aa').css({'background-color': 'orangered','margin-top': '500px','width': '50px','height': '50px'})
    }
</script>
</html>