css3動畫功能介紹

時間  2019-11-14
標籤 css3 css 動畫 功能 介紹 欄目 CSS 简体版
原文   原文鏈接

一：過渡動畫---Transitionscss

   含義：在css3中，Transitions功能經過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另外一個屬性值來實現動畫功能。css3

   Transitions屬性的使用方法以下所示：web

   transition: property | duration  | timing-function | delaychrome

   transition-property: 表示對那個屬性進行平滑過渡。瀏覽器

   transition-duration: 表示在多長時間內完成屬性值的平滑過渡。動畫

   transition-timing-function 表示經過什麼方法來進行平滑過渡。spa

   transition-delay: 定義過渡動畫延遲的時間。firefox

瀏覽器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+code

下面是transitions過渡功能的demo以下：orm

HTML代碼以下：

<div class="transitions">transitions過渡功能</div>

CSS代碼以下：

.transitions {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
        
    -moz-transition-property: background-color;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: linear;

    -o-transition-property: background-color;
    -o-transition-duration: 1s;
    -o-transition-timing-function: linear;
} 
.transitions:hover {
　　background-color: #00ffff;
}

demo效果演示以下：

transitions過渡功能演示--- 鼠標移上來便可看到效果！！

 上面的，有時候咱們爲了書寫方便，能夠簡寫以下寫法：

 .transitions {
    -webkit-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
 }
.transitions:hover {
    background-color: #00ffff;
}

若是想要過渡多個屬性，可使用逗號分割，以下代碼：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2.  咱們可使用Transitions功能同時平滑過渡多個屬性值。

以下HTML代碼：

<h2>transitions平滑過渡多個屬性值</h2>
<div class="transitions2">transitions平滑過渡多個屬性值</div>

CSS代碼以下：

.transitions2 {
    background-color:#ffff00;
    color:#000000;
    width:300px;

    -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
.transitions2:hover {
    background-color: #003366;
    color: #ffffff;
    width:400px;
}

demo演示以下：

transitions平滑過渡多個屬性值

transitions平滑過渡多個屬性值

二：Transform功能：

  Transform的含義是：改變，使…變形，轉換的意思。

  語法：none|<transform-function>[<transform-function>]*    初始值是none。

  Transform-function 的取值以下：

  1. matrix() 定義距陣變換。基本上不多使用。
  2. translate() 移動元素對象。
  3. scale() 縮放元素對象。
  4. rotate() 旋轉元素對象。
  5. skew() 傾斜元素對象。

下面咱們來分解 2~5中的各個屬性的使用吧！以下：

一：transform:rotate()

   含義是旋轉，其中的deg是 度 的意思，如」10deg」表示10度的意思。

   以下HTML代碼：

<h2>transform屬性-rotate旋轉的demo</h2>
<div class="rotate">
    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼以下：

.rotate img {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transition:1s all linear;
}
.rotate {width:520px;height:280px;overflow:hidden;}
.rotate img:hover {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg)}

demo演示以下：

transform屬性-rotate旋轉的demo

 二：transform:skew(); 含義傾斜的意思。以下偏斜20度的demo

HTML代碼以下：

<h2>transform屬性-skew傾斜的demo</h2>
<div class="skew">
    <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼以下：

.skew img {
    -webkit-transform:skew(0deg);
    -moz-transform:skew(0deg);
    -o-transform:skew(0deg);
    transition:1s all linear;
}
.skew {width:520px;height:280px;overflow:hidden;}
.skew img:hover {-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg)}

demo演示以下：

transform屬性-skew傾斜的demo

三：transform:scale();

含義：好比「1.5」表示以1.5的比例放大，-1.5 表示以1.5的比例縮小。

如：-webkit-transform:scale(1.5); 在chrome或者safari瀏覽器下放大1.5倍。

HTML代碼以下：

<h2>transform屬性-scale縮放的demo</h2>
    <ul class="transform">
        <li>
            <img src="http://m3.img.srcdd.com/farm4/d/2015/0228/22/291A00ACAACA473D6EE206F118EB473C_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m2.img.srcdd.com/farm5/d/2015/0228/22/2990B0DA0492FBEC9D71FCA00ACE814A_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m2.img.srcdd.com/farm4/d/2015/0228/22/61DB5F16DAD802B61F976BE1FE09A4E9_B500_900_110_110.jpeg"/>
        </li>
        <li>
            <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/3AE45F87A04F6F2C0B688F6C844F52CE_B500_900_110_93.jpeg"/>
        </li>
    </ul>

CSS代碼以下：

ul,li{list-style:none;}
.transform{ width:205px; margin:100px auto;overflow: hidden;padding: 50px;}
.transform li{ border-radius: 4px;background: #fff;width:45px; height:45px;margin:3px; float:left; transition:.1s all ease;}

.transform li img{border-radius: 4px;height: 43px;width: 43px;border: 1px solid #fff;cursor: pointer;}

.transform li:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);}

demo演示以下：

transform屬性-scale縮放的demo

 

四：transform:translate();

     含義：變更，位移

     如：-webkit-transform:translate(120px,0); 表示向右位移120px，向上位移0px；向左向下位移則爲負 「-」，以下demo

    HTML代碼以下：

<h2>transform屬性-translate變更位移的demo</h2>
<div class="translate">
        <img src="http://m1.img.srcdd.com/farm5/d/2015/0228/22/FD9886C5434AC71115812ED3DB6409B9_B500_900_500_269.jpeg"/>
</div>

CSS代碼以下：

.translate img {
    -webkit-transform:translate(0,0);
    -moz-transform:translate(0,0);
    -o-transform:translate(0,0);
    transition:1s all linear;
}
.translate {width:520px;height:280px;overflow:hidden;}
.translate img:hover {-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0);-o-transform:translate(120px,0)}

demo演示以下：

transform屬性-translate變更位移的demo

三：Animations功能；

    Animations功能與Transitions功能相同，都是經過改變元素的屬性值來實現動畫效果的。它們的區別在於：使用Transitions功能是隻能經過指定屬性的開始值與結束值。而後在這兩個屬性值之間進行平滑過渡的方式來實現動畫效果，所以不能實現複雜的動畫效果；而Animations則經過定義多個關鍵幀以及定義每一個關鍵幀中元素的屬性值來實現更爲複雜的動畫效果。

用法：@-webkit-keyframes 關鍵幀的集合名 {建立關鍵幀的代碼}

以下面的代碼：

@-webkit-keyframes mycolor {

           0% {background-color:red;}

           40% {background-color:darkblue;}

           70% {background-color: yellow;}

           100% {background-color:red;}

}

.animate:hover {

           -webkit-animation-name: mycolor;

           -webkit-animation-duration: 5s;

           -webkit-animation-timing-function:linear;

}

如上：-webkit-animation-name屬性中指定關鍵幀集合的名稱，

-webkit-animation-duration屬性指定完成整個動畫所須要完成的時間，timing-function 值實現動畫的方法。

能夠看以下demo

HTML代碼以下：

<h2>使用animate實現更爲複雜的動畫</h2>
<div class="animate">使用animate實現更爲複雜的動畫</div>

CSS代碼以下：

.animate {background-color:red;height:100px;}
    
@-webkit-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
@-moz-keyframes mycolor {
    0% {background-color:red;}
    40% {background-color:darkblue;}
    70% {background-color: yellow;}
    100% {background-color:red;}
}
    
.animate:hover {
    -webkit-animation-name: mycolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function:linear;

    -moz-animation-name: mycolor;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function:linear;
}

demo演示以下：

使用animate實現更爲複雜的動畫

使用animate實現更爲複雜的動畫

如上就能夠實如今chrome，firefox，safari及opera瀏覽下上的效果了；

注意：在opera中寫以下css代碼是不生效的；以下：

.animate:hover {

       -o-animation-name: mycolor;

       -o-animation-duration: 5s;

       -o-animation-timing-function:linear;

 }

 @-o-keyframes mycolor {

      0% {background-color:red;}

      40% {background-color:darkblue;}

      70% {background-color: yellow;}

      100% {background-color:red;}

 }

實現動畫的方法以下：

linear: 在動畫開始時到結束的時候以一樣的速度進行改變。

ease-in 在動畫開始時候速度很慢，而後速度沿曲線值進行加快。

ease-out  在動畫開始時 速度很快，而後速度沿曲線值進行放慢。

ease 動畫開始時速度很慢，而後速度沿曲線值進行加快，而後再沿曲線值放慢。

ease-in-out 動畫開始時速度很慢，而後速度沿曲線值進行加快，而後再沿曲線值放慢

下面咱們繼續使用  animate實現多個屬性值同時改變的動畫 demo以下：

HTML代碼以下：

<h2>使用animate實現多個屬性值同時改變的動畫</h2>
<div class="animate2">使用animate實現多個屬性值同時改變的動畫</div>

CSS代碼以下：

.animate2 {
    background-color:yellow;
    width:500px;
    height:100px;
}
@-moz-keyframes mycolor2 {
    0% {
        background-color: red;
        -moz-transform: rotate(0deg);
    }
    40% {
        background-color: darkblue;
        -moz-transform: rotate(30deg);
    }
    70% {
        background-color: yellow;
        -moz-transform: rotate(-30deg);
    }
    100% {
        background-color: red;
        -moz-transform: rotate(0deg);
    }
}
@-webkit-keyframes mycolor2{
    0% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
    40% {
        background-color: darkblue;
        -webkit-transform: rotate(30deg);
    }
    70% {
        background-color: yellow;
        -webkit-transform: rotate(-30deg);
    }
    100% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
}
.animate2:hover {
    -webkit-animation-name: mycolor2;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function: linear;

    /* 無限循環旋轉 當count爲整數時候，那麼就旋轉的次數就等於該整數值*/
    -webkit-animation-iteration-count:infinite;

    -moz-animation-name: mycolor2;
    -moz-animation-duration:5s;
    -moz-animation-timing-function: linear;

    /* 無限循環旋轉 當count爲整數時候，那麼就旋轉的次數就等於該整數值*/
    -moz-animation-iteration-count:infinite;
}

demo演示以下：

使用animate實現多個屬性值同時改變的動畫

使用animate實現多個屬性值同時改變的動畫
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程