最近项目需要，需要写一些动画效果，然后对animation的知识巩固了一下。animationanimation-name 需要绑定到选择器的 keyframe 名称animation-duration 完成动画所需要的时间animation-delay 设置延长时间animation-timing-function 动画的运动速度linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。ease-out 动画以低速结束。ease-in-out 动画以低速开始和结束。cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。animation-iteration-count 动画播放的次数infinite 规定动画应该无限次播放。animation-direction 轮流反向播放动画normal 默认值。动画应该正常播放。alternate 动画应该轮流反向播放。— 好吧 这个就介绍到这里吧 如果还有什么疑问可以自己去了解一下1.animation1<div class=“spinner”> <div class=“rect1”></div> <div class=“rect2”></div> <div class=“rect3”></div> <div class=“rect4”></div> <div class=“rect5”></div></div><style>.spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px;} .spinner > div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out;} .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s;} .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s;} .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s;} .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s;} @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) }} @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }}</style>2.animation2<div class=“spinner”></div><style>.spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;} @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }} @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }}</style>3.animation3<div class=“spinner”> <div class=“double-bounce1”></div> <div class=“double-bounce2”></div></div><style>.spinner { width: 60px; height: 60px; position: relative; margin: 100px auto;} .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #67CF22; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out;} .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s;} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }} @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }}</style>4.animation4<div class=“spinner”> <div class=“dot1”></div> <div class=“dot2”></div></div><style>.spinner { margin: 100px auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear;} .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #67CF22; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out;} .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s;} @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }} @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }}</style>5.animation5<div class=“spinner”> <div class=“bounce1”></div> <div class=“bounce2”></div> <div class=“bounce3”></div></div><style>.spinner { margin: 100px auto 0; width: 150px; text-align: center;} .spinner > div { width: 30px; height: 30px; background-color: #67CF22; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both;} .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;} .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;} @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) }} @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); }}</style>