1. 程式人生 > >CSS3 transition 屬性

CSS3 transition 屬性

linear ble mpat lin 執行 css3 tle http 默認

作用:transition 用於實現過渡效果。

語法:transition: property duration timing-function delay;

   默認值 :all 0 ease 0

   property 指定CSS屬性的name

   duration 過渡動畫持續的時間 (秒)

   timing-function 過渡動畫的運動曲線

   delay 等待多少秒後開始執行動畫效果

舉個栗子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>transition過渡動畫</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: blue;
      transition: all 2s linear;
    }
    .box:hover {
      width: 200px;
      height: 200px;
    }
  
</style> </head> <body> <div class="box"></div> </body> </html>

CSS3 transition 屬性