欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 @keyframes簡單動(dòng)畫實(shí)現(xiàn)

  發(fā)布時(shí)間：2018-02-24 15:09:23   作者：迪迪的博客   我要評(píng)論
這篇文章主要介紹了CSS3 @keyframes簡單動(dòng)畫實(shí)現(xiàn)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

CSS3 @keyframes簡單動(dòng)畫實(shí)現(xiàn)

定義：

通過 @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。

創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動(dòng)畫過程中，可以多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。

0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。

為了獲得最佳的瀏覽器支持，應(yīng)始終定義 0% 和 100% 選擇器。

重要：兼容問題！@keyfrmes 不兼容IE 9 and 以及更早版本的瀏覽器.

語法：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 必需。定義動(dòng)畫的名稱。
keyframes-selector

必需。動(dòng)畫時(shí)長的百分比。

合法的值：

  • 0-100%
  • from（與 0% 相同）
  • to（與 100% 相同）
css-styles 必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性。 

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//多個(gè)特性變化，用;隔開.

@-webkit-keyframes mymove{

0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

使用mymove動(dòng)畫方法：

選擇器

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無限次循環(huán)，也可設(shè)置次數(shù)n：
                                           animation-interation-count:n*/ 
}

總結(jié)：@keyframes與animation密切相關(guān)，如想透徹掌握，還需對(duì)照animation用法一起學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論