How can I create a div element with the class of box that already has some transitions applied to it, and also include a slide animation on hover effect for the same div?
.box {
background-color: red;
width: 70px;
height: 70px;
transition-property: background, color;
transition-duration: .2s, 4s;
transition-timing-function: linear, ease-out;
transition-delay: 2s, ;
}
@keyframes slide{
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
.box:hover .box{
background-color: yellow;
color:white;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: infinite;
}
html:
<div class="box"> </div>