CSS3动画transform、transition和animation的区别

https://www.cnblogs.com/ypppt/p/13363747.html

 

transition-timing-function 动画的执行方式

值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去自定义一个时间曲线)。

transition-delay 动画延时时间基本用法与duration相同。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <title></title>
    <style>
        .menu {
            width: 2rem;
            height: 1.8rem;
            cursor: pointer;
            /* animation-duration: 0.2s;
            -webkit-animation:test 0.2s; */
            display: flex;
            flex-wrap: wrap;
        }
        .menu>span {
            width: 100%;
            height: 0;
            border: 1px solid #ccc;
        }
        .menu>span {
            /* animation: test; */
            /* height: .5rem; */
            transition: transform .2s linear;
        }
        .menu:hover>span:first-child {
            transform: rotate(-45deg);
        }
        .menu:hover>span:nth-child(2) {
            opacity: 0;
        }
        .menu:hover>span:nth-child(3) {
            transform: rotate(45deg);
        }
        

        @keyframes test {
            
        }
    </style>
</head>
<body>
    <div class="menu"><span></span><span></span><span></span></div>
    <div class="test"></div>
</body>
<script src="js/jquery.js"></script>
<script>

</script>

 

posted @ 2021-07-07 21:01  小清秋  阅读(65)  评论(0)  编辑  收藏  举报