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>