Powered by md-Blog  文 - 篇  访客 -

CSS3动画transition、animation、transform的使用方法


  分类:HTML5+CSS3  / 
更新:2020-01-16 14:19:15  /  创建:2020-01-16 14:19:15
不要删除

1、CSS3 动画包含

  • transition
transition: width 1s ease 0s;
后面不要跟 all,占用浏览器资源
  • animation
animation: name duration timing-function delay iteration-count direction fill-mode;

有播放次数、播放方向、停止播放状态、是否暂停

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。会开启浏览器渲染GPU加速加持,更流畅。

2、时间函数

动画单位帧内播放的速度曲线

预设值
linear ease ease-in ease-out ease-in-out

cubic-bezier(n,n,n,n) 可以在 Chrome 浏览器中调节

3、动画监听

let runstart = () =>{console.log('runstart')}
let runend = () =>{console.log('runend')}
$loading = addEventListener('animatonstart', runstart);
$loading = addEventListener('animatonend', runend);

4、参考 Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
<style>
body{
    text-align: center;
}
div{
    margin: 30px 500px;
}
.box{
    width: 100px;
    height: 100px;
}
/* demo 1 */
.demo1{
    background: #F60;
    transition: width 1s ease 0s; 
    /* 属性、过渡时间、切换速度时间函数、延迟启动 */
}
.demo1:hover{
    width: 500px;
}

/* demo 2 */
.demo2{
    background: #F00;
    transition: transform 1s ease-out 0s; 
    /* 属性、过渡时间、切换速度时间函数、延迟启动 */
}
.demo2:hover{
    transform: rotate(45deg);
}

/* demo 3 */
.demo3{
    background: #2b8fca;
}
.demo3:hover{
    /* animation: move 1s linear infinite alternate; */
    /* infinite 无限循环,可以为具体的数字 */
    animation: move 1s linear 2 alternate forwards;
    /* 来回一次 */
}
/* 定义动画名称 */
@keyframes move{
    100%{
        transform: translateX(100px);
    }
}

/* demo 4 */
.demo4{
    background: green;
    border-radius: 50%;
    animation: jump 2s cubic-bezier(0.38, 0, 0.98, 0.29) infinite;
}
@keyframes jump{
    0%{
        transform: translateY(0px);
    }
    40%{
        transform: translateY(100px);
        clip-path: ellipse(50% 50% at 50% 50%);
    }
    50%{
        transform: translateY(100px);
        clip-path: ellipse(50% 30% at 50% 30%);
    }
    100%{
        transform: translateY(0px);
    }
}

/* demo 5 */
.demo5{
    background: #f1c800;
    font-size: 100px;
    line-height: 83px;
    /* animation: round 2s steps(12) infinite; */
    animation: round 2s linear infinite;
}

/* demo 6 */
.demo6{
    background: #f1c800;
    font-size: 100px;
    line-height: 83px;
    animation: round 2s steps(12) infinite;
}
@keyframes round {
    100%{
        transform: rotate(360deg);
    }
}

</style>
</head>
<body>
    <hr>
    demo1
    <div class="box demo1"></div>
    <hr>
    demo2
    <div class="box demo2"></div>
    <hr>
    demo3
    <div class="box demo3"></div>
    <hr>
    demo4
    <div class="box demo4"></div>
    <hr>
    demo5
    <div class="box demo5">+</div>
    <hr>
    demo6
    <div class="box demo6">+</div>
</body>
</html>

不要删除

小站不易,感谢支持!