- animation: 動畫名稱 持續時間
@keyframe 動畫名稱 {
from {
CSS 屬性: 值
}
to {
CSS 屬性: 值
}
}
@keyframes active {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
2. transition: CSS屬性 持續時間;
div{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #336699;
/*transition:width 1s;*/
transition:all 1s;
/*transition: height 1s;*/
}
div:hover{
width: 300px;
height: 400px;
}
3.html简代demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1 {
border: 1px solid blue;
width: 100px;
height: 40px;
animation: active 1s linear 1;
}
@keyframes active {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#c1:checked~.box2 {
margin-left: 50px;
display: block;
visibility: hidden;
opacity: 0;
}
.box2 {
margin-left: 0px;
height: 100px;
width: 100px;
background-color: #0a0;
transition: 1s -.3s linear;
visibility: visible;
opacity: 1;
}
</style>
<body>
<button onclick='toggle()'>change</button>
<div class="box1"></div>
<br />
<input id="c1" type="checkbox">
<br />
<br />
<div class="box2"></div>
</body>
</html>
<script>
function toggle() {
curr = document.querySelector('div').style.display
if (curr == 'display' || curr == '') {
document.querySelector('div').style.display = 'none'
} else {
document.querySelector('div').style.display = ''
}
}
</script>
1:animation: 動畫名稱 持續時間@keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 }} @keyframes active { 0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); } }
2:transition: CSS屬性 持續時間;div{ width: 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; /*transition: height 1s;*/}div:hover{ width: 300px; height: 400px; }