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

CSS3 @keyframes簡單動畫實現(xiàn)

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

CSS3 @keyframes簡單動畫實現(xiàn)

定義：

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

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

在動畫過程中，可以多次改變這套 CSS 樣式。

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

0% 是動畫的開始時間，100% 動畫的結束時間。

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

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

語法：

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

animationname 必需。定義動畫的名稱。
keyframes-selector

必需。動畫時長的百分比。

合法的值：

  • 0-100%
  • from（與 0% 相同）
  • to（與 100% 相同）
css-styles 必需。一個或多個合法的 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;}
}
//多個特性變化，用;隔開.

@-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動畫方法：

選擇器

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

總結：@keyframes與animation密切相關，如想透徹掌握，還需對照animation用法一起學習。

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

相關文章

  • 詳解CSS動畫屬性關鍵幀keyframes全解析

    這篇文章主要介紹了詳解CSS動畫屬性關鍵幀keyframes全解析的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-09

  • CSS3中的@keyframes關鍵幀動畫的選擇器綁定

    @keyframes可以幫助我們進行類似Flash中的關鍵幀動畫制作,這里我們來簡單討論一下CSS3中的@keyframes關鍵幀動畫的選擇器綁定,需要的朋友可以參考下
    2016-06-13

  • @keyframes規(guī)則實現(xiàn)多重背景的CSS動畫

    這篇文章主要介紹了@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫,代碼中使用的是效果圖中顯示的素材,僅作為腳本示例在此便不提供下載了,需要的朋友可以參考下
    2015-08-05

  • CSS3 中的@keyframes介紹

    CSS3新增動畫屬性“@keyframes”，從字面就可以看出其含義——關鍵幀，這與Flash中的含義一致。利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關鍵幀處的狀態(tài)效果，
    2014-09-02

  • 快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)

    這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以
    2020-02-25

最新評論