摘要:原文譯文一個初學者對動畫的介紹譯者現在,越來越多的網站使用了動畫,并且形式多樣,如背景視頻等等。先看看效果關于和動畫的介紹動畫主要的組件是,這個規則就是用來創建動畫的。然后,為了使動畫生效,需要將和一個選擇器綁定。元素首先,定義動畫的分隔。
原文:A Beginner’s Introduction to CSS Animation
譯文:一個初學者對CSS動畫的介紹
譯者:dwqs
現在,越來越多的網站使用了動畫,并且形式多樣,如GIF、SVG、WebGL、背景視頻等等。當在web中恰當使用動畫時,它可以給網站注入活力和良好的交互性,給用戶提供額外的一層反饋和體驗。
在這篇文章,我將向你介紹CSS動畫,隨著瀏覽器對動畫支持的改善,一種高效率的做事方式變得越來越流行。考慮到基礎知識,我將快速建立一個從正方形變成圓形的動畫案例。
先看看效果:http://jsfiddle.net/Web_Code/tchoafyh/embedded/result/
關于@keyframes和動畫的介紹CSS動畫主要的組件是@keyframes,這個規則就是用來創建動畫的。將@keyframes當作是時間軸的不同階段,在其內部,你可以自定義時間軸的不同階段,每個階段有不同的CSS聲明。
然后,為了使CSS動畫生效,需要將@keyframes和一個選擇器綁定。最后將會逐漸解析@keyframes內的全部代碼,以階段為劃分,慢慢改變把最初的樣式變成新的樣式。
@keyframes元素首先,定義動畫的分隔。@keyframes的屬性如下:
1、選擇一個名字(在案例我選擇tutsFade)
2、階段劃分:0%–100%,從0%到100%
3、CSS樣式:你想要在每一個階段用到的樣式
例如:
@keyframe tutsFade{ 0%{ opacity:1; } 100%{ opacity:0; } } 或者: @keyframe tutsFade{ from{ opacity:1; } to{ opacity:0; } }
還有一種簡寫形式:
@keyframe tutsFade{ to{ opacity:0; } }
上述代碼將對元素的透明度應用一個過渡效果:從1到0,三種方式最終的效果相同。
動畫Animation作為一個選擇器去調用@keyframes。Animation有很多的屬性:
1、animation-name:@keyframes的名字(例如tutsFade)
2、animation-duration:動畫持續的時間
3、animation-timing-function:設置動畫的速度特效,可以選擇linear/ease-in/ease/ease-out/ease-in-out/cubic-bezier
4、animation-delay:動畫開始之前的時間延遲
5、animation-iteration-count:動畫循環的次數
6、animation-direction:規定動畫是否反向輪播,normal是默認值,正常播放;alternate表示動畫反向輪播
7、animation-fill-mode:規定動畫在播放之前或之后,其動畫效果是否可見(none/forwards/backwards/both)
例如:
.element { animation-name: tutsFade; animation-duration: 4s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; }
簡寫:
.element { animation: tutsFade 4s 1s infinite linear alternate; }添加私有前綴
需要添加特定瀏覽器的私有前綴以確保最好的瀏覽器支持:chrome&Safari:-webkit-;Firefox:-moz-;Opera:-o-;IE:-ms-
修改如下:
.element { -webkit-animation: tutsFade 4s 1s infinite linear alternate; -moz-animation: tutsFade 4s 1s infinite linear alternate; -ms-animation: tutsFade 4s 1s infinite linear alternate; -o-animation: tutsFade 4s 1s infinite linear alternate; animation: tutsFade 4s 1s infinite linear alternate; }
@keyframes也一樣
@-webkit-keyframes tutsFade { /* your style */ } @-moz-keyframes tutsFade { /* your style */ } @-ms-keyframes tutsFade { /* your style */ } @-o-keyframes tutsFade { /* your style */ } @keyframes tutsFade { /* your style */ }
為了得到更多瀏覽器供應商的私有前綴,你可以去http://css3please.com/,查找,上面提供了非常豐富的資源。
多動畫可以添加多個動畫,各個動畫之間用逗號分隔。
.element { animation: tutsFade 4s 1s infinite linear alternate, tutsRotate 4s 1s infinite linear alternate; } @keyframes tutsFade { to { opacity: 0; } } @keyframes tutsRotate { to { transform: rotate(180deg); } }方形到圓形的動畫教程
利用上面的規則,我將創建一個簡單的圖形動畫。總共會有5個階段,并且在每個階段都會對元素定義不同的Border-radius,rotation和background-color。
1、基本元素div { width: 200px; height: 200px; background-color: coral; }2、聲明Keyframes
創建一個名為square-to-circle的keyframe元素,包含5個階段
@keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; transform:rotate(0deg); } 25% { border-radius:50% 0 0 0; background:darksalmon; transform:rotate(45deg); } 50% { border-radius:50% 50% 0 0; background:indianred; transform:rotate(90deg); } 75% { border-radius:50% 50% 50% 0; background:lightcoral; transform:rotate(135deg); } 100% { border-radius:50%; background:darksalmon; transform:rotate(180deg); } }3、應用動畫
將定義的動畫應用之前的div
div { width: 200px; height: 200px; background-color: coral; animation: square-to-circle 2s 1s infinite alternate; }4、使用時間函數和添加私有前綴
最后要添加的一個動畫屬性是animation-timing-function,它對動畫元素的速度、加速和減速進行定義。一個類似的工具是:CSS Easing Animation Tool,可以使用它來計算時間函數。
在案例中,我給動畫添加了一個cubic-bezier函數。
div { width: 200px; height: 200px; background-color: coral; animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; }
為了保證最好的瀏覽器支持,還必須添加私有前綴(沒有添加前綴的代碼如下)
div { width: 200px; height: 200px; background-color: coral; animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; } @keyframes square-to-circle { 0% { border-radius:0 0 0 0; background:coral; transform:rotate(0deg); } 25% { border-radius:50% 0 0 0; background:darksalmon; transform:rotate(45deg); } 50% { border-radius:50% 50% 0 0; background:indianred; transform:rotate(90deg); } 75% { border-radius:50% 50% 50% 0; background:lightcoral; transform:rotate(135deg); } 100% { border-radius:50%; background:darksalmon; transform:rotate(180deg); } }
這個在FireFox顯示會有點異常,為了在FireFox有絕佳的顯示效果,可以給div添加如下樣式
outline: 1px solid transparent;
原文首發:http://www.ido321.com/1282.html
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110974.html
摘要:關于貝塞爾曲線和可以參照上一篇,和類似,不多贅述。單位是秒或毫秒。默認值是表示正常播放動畫。默認值表示動畫播完后,恢復到初始狀態。例如的動畫庫,里面設計出的貝塞爾曲線能讓動畫效果非常逼真。下一篇將介紹一些常見實用的動畫效果。 本篇介紹的animation屬性和傳統的動畫制作一樣,能控制幀的每一步,制作出更強大的動畫效果。 和其他CSS3屬性類似,animation包含很多子屬性,我們一...
摘要:然而我發現都年了,還有很多同學不會動畫。指定動畫計時函數,即動畫的速度曲線,默認是。指定動畫播放狀態,正在運行或暫停。除了默認值外,還有另外個值,表示,動畫完成后,元素狀態保持為最后一幀的狀態。今年我面試了很多同學,只要看到簡歷上寫熟練掌握CSS3的,我都會問問動畫相關知識。然而我發現:都 2019 年了,還有很多同學不會 CSS 動畫。 我經常愛問的一個問題是,實現如下的效果: 即,一個...
閱讀 891·2023-04-26 01:37
閱讀 3367·2021-09-02 15:40
閱讀 955·2021-09-01 10:29
閱讀 2887·2019-08-29 17:05
閱讀 3418·2019-08-28 18:02
閱讀 1180·2019-08-28 18:00
閱讀 1483·2019-08-26 11:00
閱讀 2602·2019-08-26 10:27