css3中的動畫怎么處理

今天小編給大家分享一下css3中的動畫怎么處理的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　動畫--過渡屬性

　　div {

　　width: 200px;

　　height: 200px;

　　background: red;

　　margin: 20px auto;

　　-webkit-transition-property: width;

　　transition-property: width;

　　-webkit-transition-duration:.5s;

　　transition-duration:.5s;

　　-webkit-transition-timing-function: ease-in;

　　transition-timing-function: ease-in;

　　-webkit-transition-delay: .18s;

　　transition-delay:.18s;

　　}

　　div:hover {  transition: all .28s ease-in .1s;

　　width: 400px;

　　}

　　Keyframes被稱為關鍵幀 以“@keyframes”開頭

　　@keyframes changecolor{ 聲明的動畫可自己定義

　　0%{

　　background: red;

　　}

　　40% {

　　background:orange;

　　100%{

　　background: green;

　　}

　　}

　　div{animation-iteration-count:infinite;

　　animation-iteration-count:5;

　　animation-name:move;

　　animation-direction:alternate;

　　animation-play-state:paused;

　　}

　　設置動畫播放方向  animation-direction

　　其主要有兩個值：normal、alternate

　　1、normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；

　　2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

　　1 <div><span></span></div>

　　2

　　3                          div {

　　4                              width: 200px;

　　5                              height: 200px;

　　6                              border: 1px solid red;

　　7                              margin: 20px auto;

　　8                          }

　　9     span {

　　10         display: inline-block;

　　11         width: 20px;

　　12         height: 20px;

　　13         background: orange;

　　14         transform: translateY(90px);

　　15         animation-name: move;

　　16         animation-duration: 10s;

　　17         animation-timing-function: ease-in;

　　18         animation-delay: .2s;

　　19         animation-iteration-count:infinite;

　　20         animation-direction:alternate;

　　21     }

　　22

　　23     @keyframes move {

　　24         0%{

　　25             transform: translateY(90px);

　　26         }

　　27         15%{

　　28             transform: translate(90px,90px);

　　29         }

　　30         30%{

　　31             transform: translate(180px,90px);

　　32         }

　　33         45%{

　　34             transform: translate(90px,90px);

　　35         }

　　36         60%{

　　37             transform: translate(90px,0);

　　38         }

　　39         75%{

　　40             transform: translate(90px,90px);

　　41         }

　　42         90%{

　　43             transform: translate(90px,180px);

　　44         }

　　45         100%{

　　46             transform: translate(90px,90px);

　　47         }

　　48     }

以上就是“css3中的動畫怎么處理”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。