溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3動畫實例分析”，在日常操作中，相信很多人在CSS3動畫實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3動畫實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
說起CSS3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動作，比如旋轉、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個主要對動作進行描述，動畫時間、速度曲線、次數等。
下面我用是一些簡單的示例，讓大家快速的入門上手:
這里hover事件時改變寬度和背景顏色，用transition來描述動畫，由于我們只對width進行了描述，所以背景色，鼠標指上去，會立馬變色，并不會有漸變的過程。
這里為什么用transition而不用animation？那就要說說他們直接的區別了。
transition需要觸發一個事件， 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。
現在明白了吧，因為我們用的hover事件，所以要用transition。
下面請看第二個例子
這里動畫從加載就開始執行，所以用了animation，改變寬度和背景色，用時1s，并且無限次循環執行。@keyframes規則是創建動畫。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同瀏覽器。
transform：rotate使其div元素2D旋轉20°.當然你可以設置transform：rotateY, Y 軸的 3D 旋轉。
你還可以設置transform: translate，進行2D，3D位移；
transform: scale，進行2D，3D縮放；
transform: skew，進行2D傾斜等等。
到此，關于“CSS3動畫實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
