<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.flayer{
200px;
height: 200px;
position: relative;
overflow: hidden;
background-color: blue;
}
.masklayer{
position: absolute;
left: 0;
top: 0;
/*display: none;*/
opacity: 0;
200px;
height: 200px;
color: #fff;
line-height: 200px;
background-color: pink;
}
.maskshow{
position: absolute;
left: 0;
top: 0;
200px;
height: 200px;
color: #fff;
line-height: 200px;
-webkit-animation: show 1s linear;
-webkit-animation: show 1s linear;
-moz-animation: show 1s linear;
animation: show 1s linear;
animation-fill-mode: forwards;
background-color: pink;
}
.maskhide{
position: absolute;
left: 0;
top: 0;
200px;
height:200px;
color: #fff;
line-height: 200px;
/*display: none;*/
/*如果设置display：none元素会直接消失没有动画
可以通过给元素添加监听事件addEventLister("webkitAnimationEnd",func,false)
判断动画是否完成*/
-webkit-animation: hide 1s linear;
-moz-animation: hide 1s linear;
animation: hide 1s linear;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*保存最后一次状态*/
background-color: pink;
}
@keyframes show{
from{-webkit-transform: scale(2);-moz-transform: scale(2);-ms-transform: scale(2);transform: scale(2);opacity: 0.5}
to{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 1;}
}
@keyframes hide{
from{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity: 0.5;}
to{-webkit-transform: scale(2);-moz-transform: scale(2);-ms-transform: scale(2);transform: scale(2);opacity: 0;}
}
</style>
<script>
window.onload=function(){
var flayer=document.getElementsByClassName("flayer")[0];
var masklayer=document.getElementsByClassName("masklayer")[0];
flayer.onmouseover=function(){
masklayer.className="maskshow";
/*通过css控制动画，如果直接用js给元素添加animation属性，会出现重复动画bug，可能是因为没有删除动画操作。*/
}
flayer.onmouseout=function(){
masklayer.className="maskhide";
}
}
</script>
</head>
<body>
<div class="flayer">first layer
<div class="masklayer">由大到小显示|由小到大消失</div>
</div>
</body>
</html>