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

2019-10-16 22:52:43 來源：互聯網作者：買辣椒也用券 人氣： 次閱讀 604 條評論

文章主要介紹了css transition animation的使用（內含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，區別：transition也叫過渡動畫...

二、animation（動畫效果）

因為animation動畫是一段持續且循環的動畫效果，所以不像transition過渡動畫那樣簡潔，可能會涉及到很復雜的動畫效果，所以我們要先學習一下@keyframes規則
該規則是用來創建動畫的，說直白點就是告訴元素按哪種動畫效果執行

@keyframes語法

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

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

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

合法的值：

  • 0-100%
  • from（與 0% 相同）
  • to（與 100% 相同）
css-styles 必需。一個或多個合法的 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 中無效。</p>
<div></div>
</body>
</html>

效果如下：

說明

也就是說keyframes允許你設置在不同的時間段執行不同的動畫效果

3/4首頁1234尾頁

您可能感興趣的文章

相關文章