css中实现动画有两种方式:transition过渡动画、 animation自定义动画。

transition 是 css3 新增的⼀个功能,可以实现元素不同状态间的平滑过渡(当元素从⼀个状态进⼊到另⼀个状态时),经常⽤来制作⼀些动画效果。

之前:元素 -> 元素:hover 状态直接切换,从开始状态到结束状态,瞬间完成,中间过程⼏乎不可⻅。

过渡:从开始状态到结束状态的中间过程可以查看

格式:

transition:过渡的属性 完成时间(s) 运动曲线 延迟时间

transition:all 3s(1s=1000ms) linear 0s;

transition 包含以下四个属性:

transition-property 过渡属性。如果希望所有的属性都发⽣过渡,就使⽤all

transition-duration 过渡的持续时间,单位是s或者ms

transition-timing-function 运动曲线。属性值取值:

ease 慢速开始,然后变快,然后慢速结束的过渡效果(默认 cubic-bezier(0.25,0.1,0.25,1))

linear 线性,以相同速度开始至结束的过渡效果(cubic-bezier(0,0,1,1))

ease-in 以慢速开始的过渡效果(cubic-bezier(0.42,0,1,1))

ease-out 慢速结束的过渡效果(cubic-bezier(0,0,0.58,1))

ease-in-out 以慢速开始和结束的过渡效果(cubic-bezier(0.42,0,0.58,1))

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值,https://cubic-bezier.com/

transition-delay 默认是0,单位为s,过渡延迟。多⻓时间后再执⾏这个过渡动画。

transition-duration 这个属性需要首先设置,否则时长为 0,就不会产生过渡效果。

1.圆过渡

<style>
        .div-1{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: aqua;
            transition: all 3s;
            transition-timing-function: steps(3000,start);
        }
        .div-1:hover{
            background-color: rgb(21, 255, 0);
            width: 400px;
            height: 400px;
            border-radius: 0%;
        }
    </style>

 CSS过渡动画

2.钟表秒针

<style>
        .clock{
            background: url(img/clock.png);
            border-radius: 50%;
            width: 284px;
            height: 284px;
            position: relative;
        }
        .clock::before{
            content: "";
            width: 20px;
            height: 20px;
            background-color: black;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 49.5%;
            position: absolute;
            border-radius: 50%;
        }
        .clock::after{
            content: "";
            width: 3px;
            height: 110px;
            background-color: black;
            position: absolute;
            left: 49.8%;
            top: 50%;
            transform: translate(-50%,-100%);
            border-radius: 70%;
            transform-origin: bottom;
            animation: rotate360 60s steps(60) infinite;
        }
        @keyframes rotate360 {
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        /* .clock:hover::after{
            transform: translateX(-50%) rotate(360deg);
        } */
    </style>

CSS过渡动画

 3.圆过渡动画

 <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: royalblue;
            border-radius: 50%;
            /* 应用动画 */
            animation-name: div_animate;    /*制定动画名称*/
            animation-duration: 2s;         /*动画持续时间*/
             animation-fill-mode: forwards; /*动画填充模式,forwards作用是将动画的样式停留在最后一个 */
            animation-delay: 2s;           /*动画延迟的时间,当值为负数时表示动画已经执行了多长时间*/
            animation-direction: alternate;     /*规定是否应该轮流反向播放动画。*/
            animation-iteration-count: infinite;    /*规定动画的速度曲线。*/
            animation-timing-function: cubic-bezier(.97,.08,.35,.72);/*速度*/
        }
        /* 定义动画规则 */
        @keyframes div_animate{
            from{
                background-color:royalblue;
                margin-left: 0px;
            }
            to{
                background-color: brown;
                margin-left: 500px;
            }
        }
    </style>

CSS过渡动画

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。