Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 一個簡單的CSS3動畫樣式

一個簡單的CSS3動畫樣式

發布時間:2020-05-09   編輯:www.4271936.live
jquery中文網為您提供一個簡單的CSS3動畫樣式等資源,歡迎您收藏本站,我們將為您提供最新的一個簡單的CSS3動畫樣式資源
本文章來給各位同學介紹一下關于CSS3動畫樣式詳解了,現在css3開始流行了我們來不能落后呀,下面來大家一起學學

CSS3 動畫

當您在 @keyframes 中創建動畫時,請把它捆綁到某個選擇器,否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性,即可將動畫綁定到選擇器:

•規定動畫的名稱
•規定動畫的時長


今天介紹的是國外的CSS3 Animation Cheat Sheet、Animate.css、magic css3 animation,初次看到幾個動畫效果,感覺很酷,看了一下代碼,才發現原來就是這么簡單的,就是使用了transform和animate屬性組合來做的。下面將會詳細的解釋一下這個動畫的一些使用和自己如何來寫出一個類似的動畫來。

從animate的里面我們可以了解,animate有這么幾個屬性要設置。

 代碼如下 復制代碼

 -webkit-animation-name:'wobble';/*動畫屬性名,也就是我們前面keyframes定義的動畫名*/
 -webkit-animation-duration: 10s;/*動畫持續時間*/
 -webkit-animation-timing-function: ease-in-out; /*動畫頻率,和transition-timing-function是一樣的*/
 -webkit-animation-delay: 2s;/*動畫延遲時間*/
 -webkit-animation-iteration-count: 10;/*定義循環資料,infinite為無限次*/
 -webkit-animation-direction: alternate;/*定義動畫方式*/那么我們要定義動畫的滾動方式就需要設置動畫名字的方式了。

設置動畫的過程主要用到了keyframes。

 代碼如下 復制代碼
 @keyframes IDENT {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
   }

   或者全部寫成百分比的形式:

 代碼如下 復制代碼
   @keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

從上面的這個設置方式中,我們可以看到keyframes主要的滾動方式主要通過設置每個階段的屬性和屬性值的變化來改變動畫的方式的。

上面提到的三個動畫查了大部分的CSS,都是通過transform來變化的。

舉個例子(上下震動)

 代碼如下 復制代碼

.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
animated.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

只要在需要這個動畫方式的標簽里面加上“animated”和“shake”,那么這個元素就有了震動的動畫效果了。
至于什么樣的動畫方式,這就要需要發揮你的思維了,當然你也可以上面我提到的這幾個動畫,參考別人的做法,第二個的animation.css這個比較多的效果,而且比較常用哦。這篇文章有點水了,其實就是來推薦上面的三個動畫網站。如果你有更多的類似的效果可以告訴我。這種效果自己要寫,比較困難,寫出來的不一定好看,建議直接用人家的代碼用。

您可能感興趣的文章:
分享幾個超級震憾的圖片特效
Jquery+CSS3實現一款簡潔大氣帶滑動效果的彈出層
jQuery實現CSS3動畫效果的插件 jQuery Transit
7款風格新穎的jQuery/CSS3菜單導航分享
7款吸引人眼球的jQuery/CSS3特效實例分享
6款新穎的jQuery和CSS3進度條插件推薦
jQuery Animation實現CSS3動畫示例介紹
jquery animate 動畫效果使用說明
分享8款優秀的 jQuery 加載動畫和進度條插件
使用jQuery實現的擲色子游戲動畫效果

[關閉]
微信下载APP完成任务如何赚钱 七乐彩福彩开奖结果查询今天 浙江20选5开状号码 福彩3d今开机号试机号 彩票开奖结果查询公告 股票融资网 广东11远5走势图一定牛 青海体彩十一选五开奖一定牛 安徽省11选五开奖走垫图 内蒙古11选五开奖走势图今天 易投配资