在CSS3如果需要實現動畫效果,會用到三種技術,ransform-origin,transition,ransition-delay和transition-timing-function,今天就給大家縷清思路,看看動畫效果要怎麼實現。
一、transform-origin
CSS變形的原點,預設是物件的中心點。 transform-origin接受兩個參數,他們可以是百分比、em、px等具體的值,也可以是left、right、center、top、middle、bottom等關鍵字。
例如:
transform-origin: top right;-o-transform-origin: top right;-moz-transform-origin: top right;-webkit-transform-origin: top right ;
transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;
# transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;
transform-origin : 50% 100%;-o-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;
#二、
##二、 transition--過渡1.transition-property:定義轉換動畫的CSS屬性名稱。可以是none|all|CSS屬性列表。 例如:transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property :background-color;2.transition-duration:定義轉換動畫的時間長度。 例如:transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;3.transition-delay:定義過渡動畫的延遲時間。 例如:transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;
4.transition-timing-function:定義轉換動畫的效果。 取值可以是:ease:緩解效果。 ease-in:漸顯效果。 ease-out:漸隱效果。 ease-in-out:漸顯漸隱效果。 linear:線性效果。 cubic-bezier:特殊的立方貝塞爾曲線效果。 cubic-bezier(0.3, 0, 0.5, 1.0)。 例如:transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition-timing -function: linear;三、animation1.animation-name:動畫名稱。 2.animation-duration:動畫時間。 3.animation-timing-function:動畫播放方式。 4.animation-delay:動畫開始播放時間。 5.animation-iteration-count:播放次數。 infinite表示無限次。 。 6.animation-direction:動畫播放方向。 normal--動畫的每次循環都向前 alternate--第偶數次向前,奇數次向後。 例如:
div { -webkit-transform-style: preserve-3d; -webkit-animation-name: ani; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /* 下面调用动画 */ @-webkit-keyframes ani { 0% { -webkit-transform: rotateX(0deg); } 25% { -webkit-transform: rotateX(180deg); } 50% { -webkit-transform: rotateX(360deg); } 75% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); }
以上是CSS3中動畫技術的實現步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!