1.先定义动画,再调用动画。这类似javascript的函数调用。
1.1/*先命名css动画,此处我随意命名为hover-zoom,*/
@-webkit-keyframes hover-zoom{
50%{
-webkit-transform:scale(0.8);
transform:scale(0.8);
-webkit-filter:brightness(60%)
}
100%{
-webkit-transform:scale(1);
transform:scale(1);
/*css3滤镜亮度百分比*/
-webkit-filter:brightness(100%)
}
}
1.2/*调用CSS3动画,并设置动画参数(名称、持续时间、线性函数、执行次数)*/
.hover-zoom:hover{
-webkit-animation-name:hover-zoom;
animation-name:hover-zoom;
-webkit-animation-duration:.5s;
animation-duration:.5s;
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
-webkit-animation-iteration-count:1;
animation-iteration-count:1
}
2.直接用transform设置动画,用transition定义动画,类似于上面第一种的步骤。
2.1/*原动画对象,注意此处的transition是用于动画结束后有线性还原效果*/
.item{
padding:20px;
text-align: center;
background-color: #f0f0f0;
margin-bottom: 20px;
box-shadow: 0px 0px 15px #cdcdcd;
transition: all 0.5s ease-in-out;
}
2.2/*动画和调用可以写在一起,transition设置动画参数(属性对象、时间、线性)*/
.item:hover{
-webkit-transform:translateY(-6px);
transform: translateY(-6px);
background-color: #fff;
transition: all 0.5s ease-in-out;
}
小伙伴们可以根据实际情况使用这两种方式,第一种适合大型项目,类似JS函数,先定义全局变量和函数,再按需调用。