1.transition动画

（1）transition-property 设置过渡的属性，比如：width height background-color

（2）transition-duration 设置过渡的时间，比如：1s 500ms

（3）transition-timing-function 设置过渡的运动方式，常用有linear（匀速）| ease（缓冲运动）

（4）transition-delay 设置动画的延迟

（5）transition：property duration timing-function delay; 同时设置

<head>
<meta charset="utf-8">
<title>transition动画</title>
<style type="text/css">

.box{ width: 100px; height: 100px; background-color: yellow; transition: all 500ms ease,background-color 2s ease;}.box:hover{ width: 500px; height: 500px; background-color: red;}</style>

</head>

<body>

<div class="box"></div>

</body>

例子二：图片说明文字

<head>
<meta charset="utf-8">
<title>图片</title>
<style type="text/css">

.box{ width: 320px; height: 405px; margin: 50px auto 0; position: relative; overflow: hidden;}.text{ width: 320px; height: 100px; position: absolute; top: 405px; background-color: rgba(124,119,119,0.30); transition: all 500ms ease;}.box:hover .text{ position: absolute; top: 305px;}</style>

</head>

<body>
<div class="box">
<img src="images/3_02.png" alt="星空">
<div class="text">

<h4>夜空中最亮的星</h4> <p>我在思考人生</p> </div></div>

</body>

例子三：夏目

<head>
<meta charset="utf-8">
<title>joke</title>
<style type="text/css">

@keyframes joke{ from{ left: 0px; } to{ left: -2136px; /*图片宽度*/ }}.box{ width: 534px; height: 300px; margin: 50px auto; overflow: hidden; position: relative;}.box img{ position: absolute; animation: joke 1s steps(4) infinite;}</style>

</head>

<body>

<div class="box"> <img src="images/xia.png" alt="夏目友人帐"></div>

</body>