CSS3 transition動畫
阿新 • • 發佈:2018-12-29
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">
<h3>夜空中最亮的星</h3>
<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>