Menu
I have an image that I want to stretch for 3 seconds, then pause for 2 seconds, then unstretch for 3 seconds. As it stands, I don't know how to pause it; animation-delay only works at the beginning of the animation, not the middle. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page 2</title>
<style type="text/css">
/* Your styles go here */
img {
width:200px;
height:100px;
animation: widthChange 6s;
-webkit-animation: widthChange 6s;
-moz-animation: widthChange 6s;
-0-animation: widthChange 6s;
}
p {text-align:center}
button {margin:20px}
.stylized {
font-style: italic;
border-width: 5px;
border-color: yellow;
border-style: outset;
}
@-webkit-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
@-o-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;} }
@-moz-keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
@keyframes widthChange {
0%, 100% {width: 200px;}
50% {width: 400px;}
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// jQuery methods go here...
$(document).ready(function() {
$('img').addClass("loaded");
$('img').addClass("loaded2");
$("#button1").click(function() {
$("button").addClass("stylized");
$("#button1").html("Fancy Button 1");
$("#button2").html("Fancy Button 2");
$("#button3").html("Fancy Button 3");
});
});
});
/* Your additional JavaScript goes here */
</script>
</head>
<body>
<img class = "image" src="elephant.jpg" alt="elephant"/>
<p><button id="button1">Button 1</button><button id="button2">Button 2</button><button id="button3">Button 3</button></p>
</body>
</html>
369
Try something like this. If you add in the pause time to the total time (to get 8 seconds instead of 6), and then calculate the period of time that you want the element to be static (3/8 + 2/8, where 2/8 is the 2 second pause time), and then make the element return to the default width by the end (another 3/8ths of the total time), you should get a 2-second pause in between.
I used only the default animation and @keyframes here. You can copy this code into the other browser-specific versions for compatibility.
animation: widthChange 8s;
@keyframes widthChange {
0% {width: 200px;}
37.5% {width: 400px;}
62.5% {width: 400px;}
100% {width: 200px;}
}
Stripped-down example: http://jsfiddle.net/IronFlare/pjnk6z6f/
79
You can do this by adding additional keyframes, like so:
https://jsfiddle.net/kh3qa3L6/
Eg:
@-webkit-keyframes widthChange {
0%, 100% {
width: 200px;
}
25% {
width: 400px;
}
75% {
width: 400px;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
