1.animation简单使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;
animation-name: mykeyframes;
/*动画执行时间*/
animation-duration: 3s;
}
.box:hover {
/* 鼠标悬浮时样式
放大两倍, 1.5s时,缩小1/2
颜色 橘黄色 - 蓝色 - 红色 - 绿色
*/
/*transform: scale(2);*/
/*background-color: blue;*/
/*transition: 3s;*/
}
/*关键帧:定义了动画的变换规则*/
@keyframes mykeyframes {
0%{
background-color: or@ange;
}
20%{
background-color: blue;
}
50%{
background-color: red;
transform: scale(.5);
}
100%{
background-color: green;
transform: scale(2);
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;
animation-name: mykeyframes;
/*动画执行时间*/
animation-duration: 3s;
/*动画延迟播放*/
animation-delay: 1s;
/*动画效果*/
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-out;
}
.box:hover {
/* 鼠标悬浮时样式
放大两倍, 1.5s时,缩小1/2
颜色 橘黄色 - 蓝色 - 红色 - 绿色
*/
/*transform: scale(2);*/
/*background-color: blue;*/
/*transition: 3s;*/
}
/*关键帧:定义了动画的变换规则*/
@keyframes mykeyframes {
0%{
background-color: orange;
}
20%{
background-color: blue;
}
50%{
background-color: red;
transform: scale(.5);
}
100%{
background-color: green;
transform: scale(2);
}
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>