下載 animate.css文件,文件的程式碼很多,不過要明白那是很多特效的CSS樣式,如果只使用到其中的一兩個特效,可以選擇性的複製。
首先是公共的樣式:
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated定义了动画的持续时间;
.animated.infinite定义了循环动画,如果只要求播放一次就不需要添加该样式 下面是每个特效的样式,举几个例子:
彈跳特效bound
@-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); }} @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); }} .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }
在html頁面使用,可以對文字、 圖片等其他元素使用,以下的效果是一張持續跳動的圖片
rrreee#閃爍特效flash
<img src="returnTop.png" class="animated infinite bounce">
@-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; }} @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; }} .flash { -webkit-animation-name: flash; animation-name: flash; }
以上是巧用css3 animation動畫特效插件方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!