opacity:0
}
.class:hover{
animation:ttt 3s 1 forwards /*这里的3s表示总动画长3秒，其它属性感兴趣自己去查，反正主要就是那个3s*/
}
@keyframes ttt {
0%{
opacity:0
}
66%{ /*这里表示3s的66%也就是大约2秒的时候*/
opacity:0
}
100%{
opacity:1
}
}
最终就会前2秒没变化，然后才开始执行了
下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位<div class="demo1">我是黎明</div>
<div class="demo2">我是黎明</div>
<style>
.demo1{transition: 1s}
.demo1:hover{margin-left:30px}
.demo2:hover
{
animation: myfirst 1s
-moz-animation: myfirst 1s /* Firefox */
-webkit-animation: myfirst 1s /* Safari 和 Chrome */
-o-animation: myfirst 1s /* Opera */
}
@keyframes myfirst{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-o-keyframes myfirst /* Opera */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
</style>
