Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this?
Below is the code I have:
<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-name: widthChange;
animation-duration: 3s;
-webkit-animation-name: widthChange;
-webkit-animation-duration: 3s;
-moz-animation-name: widthChange;
-moz-animation-duration: 3s;
-0-animation-name: widthChange;
-0-animation-duration: 3s;
}
p {text-align:center}
button {margin:20px}
.stylized {
font-style: italic;
border-width: 5px;
border-color: yellow;
border-style: outset;
}
@-webkit-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
from {width: 400px;}
to {width: 200px;}
}
@-o-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
from {width: 400px;}
to {width: 200px;}
}
@-moz-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
from {width: 400px;}
to {width: 200px;}
}
@keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
from {width: 400px;}
to {width: 200px;}
}
</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>