首頁 > web前端 > css教學 > 主體

介紹css3轉場和動畫有哪些差別

PHPz
發布: 2017-04-02 10:19:20
原創
3603 人瀏覽過

CSS3 轉換

CSS3中,我們為了加入某種效果可以從一種樣式轉變到另一個的時候,不需要使用Flash動畫JavaScript 。用滑鼠移過下面的元素:

也就是說我們設定好元素過渡後,突然間改變元素的屬性,它會緩慢的過渡過去,

#列入下面方法,當突然改變元素寬度時候,它會2秒後變成你改變的值

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
登入後複製

CSS3 動畫

CSS3,我們可以創建動畫,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
登入後複製

動畫是預先設定好動畫過程,css3會依照這個過程執行。

以上是介紹css3轉場和動畫有哪些差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!