As shown below, the css3 animation takes 1.7 seconds to enlarge the image in class="n1" by 1 to 1.5 times to fade out.
I'd like to put a stop on this, but it doesn't work.
After stopping class="n1" for 1 second, I would like to spend 0.7 seconds animation "scaleout" (image in n1 magnifies 1-1.5 times), but what should I do with css3 or jQuery?Please let me know.
***html***
<li class="n1"><img src="img/01.jpg" alt=">/li>
*** css***
.n1{
position:absolute;
width : 320px;
margin:0 auto;
text-align:center;
background: #cc;
bottom:0;
z-index:10;
}
.n1{
- webkit-animation:scaleout 1.7sease-in-out;
animation:scaleout 1.7sease-in-out;
}
/* Set keyframe start to end */
@-webkit-keyframes scaleout {
0% {
- webkit-transform:scale (1.0)
}
50% {
opacity:1;
}
100% {
- webkit-transform:scale (1.5);
opacity: 0;
}
}
@keyframesscaleout{
0% {
transform:scale(1.0);
- webkit-transform:scale(1.0);
}
50% {
opacity:1;
}
100% {
transform —scale (1.5);
- webkit-transform:scale (1.5);
opacity: 0;
}
}
Use transition-delay , which is the fourth parameter.
In the example below, mouse over the image to start the animation (remove the mouse from the image to restore). The scaleout equivalent to transform is net 1.7 seconds since it takes 0.7 seconds to apply after a 1 second delay.Animation to opacity to erase images is applied in 0 seconds after a 1.7 second delay, so it disappears after the previous scaleout.
By the way, if you extend the application time of opacity, it will disappear suddenly.You may also want to change the display or visibility properties in a similar way after you turn them off.
.n1:hover{
transform —scale (1.5);
opacity: 0;
transition:
transform 0.7sease-in-out 1.0s,
opacity0sease 1.7s;
}<img class="n1" src="http://i.stack.imgur.com/tE90I.jpg?s=328&g=1">For clarity, this snippet does not have a vendor prefix.Therefore, it may not work properly depending on the browser, but we have verified that Chrome 43 works properly.
© 2024 OneMinuteCode. All rights reserved.