CSS3學習中，記錄中.....

時間 2019-11-18

標籤 css3 css 學習記錄欄目 CSS 简体版

原文原文鏈接

1. 動畫效果html

從代碼中看各個屬性吧！【原諒我用的是火狐瀏覽器】web

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    /* 
        這裏 -moz-animation全都整到一個了，沒有單列出來
        語法：animation: name duration timing-function delay iteration-count direction;
     */
    -moz-animation:mymove 5s infinite; /* Firefox */
    /* 其實這有好多呢！
        animation-name   須要綁定到選擇器的 keyframe 名稱（不解釋）
        animation-duration  完成動畫所花費的時間，以秒或毫秒計（不解釋）
        animation-timing-function  規定動畫的速度曲線。    【如下爲屬性值】
                linear  動畫從頭至尾的速度是相同的。
                ease    默認。動畫以低速開始，而後加快，在結束前變慢。
                ease-in   動畫以低速開始
                ease-out   動畫以低速結束
                ease-in-out  動畫以低速開始和結束
        animation-delay   規定在動畫開始以前的延遲，以秒或毫秒計。默認值是 0 可爲負（負值，動畫跳過 2 秒進入動畫週期）
        animation-iteration-count    規定動畫播放的次數 
                1.實際的數字
                2.infinite 無限次播放
        animation-direction    是否應該輪流反向播放動畫
                normal    默認值。動畫應該正常播放。
                alternate   動畫應該輪流反向播放。
        這裏還有倆屬性
        animation-play-state   規定動畫正在運行仍是暫停
                paused    動畫暫停
                running   動畫正在播放
         animation-fill-mode  規定動畫在播放以前或以後，其動畫效果是否可見（這個屬性沒明白）
               none 不改變默認行爲。
               forwards  當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
               backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
               both 向前和向後填充模式都被應用。
    */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
/* 目前瀏覽器都不支持 @keyframes 規則。*/
@keyframes mymove
{
    from {top:0px;}
    to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

<div></div>

</body>
</html>

整理了CSS3的動畫感受很很差記！
瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。