CSS transition animation的使用（內(nèi)含貝賽爾曲線詳解）(3)

2019-10-16 22:52:43 來(lái)源：互聯(lián)網(wǎng)作者：買辣椒也用券 人氣： 次閱讀 604 條評(píng)論

文章主要介紹了css transition animation的使用（內(nèi)含貝賽爾曲線詳解），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，區(qū)別：transition也叫過(guò)渡動(dòng)畫(huà)...

二、animation（動(dòng)畫(huà)效果）

因?yàn)閍nimation動(dòng)畫(huà)是一段持續(xù)且循環(huán)的動(dòng)畫(huà)效果，所以不像transition過(guò)渡動(dòng)畫(huà)那樣簡(jiǎn)潔，可能會(huì)涉及到很復(fù)雜的動(dòng)畫(huà)效果，所以我們要先學(xué)習(xí)一下@keyframes規(guī)則
該規(guī)則是用來(lái)創(chuàng)建動(dòng)畫(huà)的，說(shuō)直白點(diǎn)就是告訴元素按哪種動(dòng)畫(huà)效果執(zhí)行

@keyframes語(yǔ)法

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

值 描述
animationname 必需。定義動(dòng)畫(huà)的名稱。
keyframes-selector

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

合法的值：

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

案例

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /* Firefox */
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
@-moz-keyframes mymove /* Firefox */{
    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;}
}
@-o-keyframes mymove /* Opera */{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
</style>
</head>
<body>
<p><b>注釋：</b>本例在 Internet Explorer 中無(wú)效。</p>
<div></div>
</body>
</html>

效果如下：

說(shuō)明

也就是說(shuō)keyframes允許你設(shè)置在不同的時(shí)間段執(zhí)行不同的動(dòng)畫(huà)效果

3/4首頁(yè)1234尾頁(yè)

您可能感興趣的文章

相關(guān)文章