CSS/jQuery animation not triggering
Question
I'm trying to use an animation, triggered by changing the class in jQuery on page load. It currently isn't doing anything. I'm unsure of what is going wrong, although I'm pretty sure it's something wrong with the CSS. Here's my code:
<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;}
.loaded {animation-name: widthChange; animation-duration: 3s;}
p {text-align:center}
button {margin:20px}
@keyframes widthChange {
from {width: 200px;}
to {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");
});
});
/* Your additional JavaScript goes here */
</script>
</head>
<body>
<img class = "image" src="elephant.jpg" alt="elephant"/>
<p><button>Button 1</button><button>Button 2</button><button>Button 3</button></p>
</body>
</html>
3 answers
solution1
2 2015-04-24 21:18:12
You need to define vendor prefixes (at the time of writing) for webkit browsers, see support information . Correct definition would look like this:
$(function () { $('img').addClass("loaded"); });
img { width:200px; height:100px; } .loaded { -webkit-animation: widthChange 3s; animation: widthChange 3s; } p { text-align:center } button { margin:20px } @-webkit-keyframes widthChange { from { width: 200px; } to { width: 400px; } } @keyframes widthChange { from { width: 200px; } to { width: 400px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="image" src="http://lorempixel.com/100/100" alt="elephant" />
If you want the image to preserve final state after the end of animation you can add animation-fill-mode: forwards; :
-webkit-animation: widthChange 3s forwards;
solution2
1 ACCPTED 2015-04-24 21:25:54
You could try with this code that is supported by all browsers: fiddle
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}
@-webkit-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@-o-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@-moz-keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
@keyframes widthChange {
from {width: 200px;}
to {width: 400px;}
}
solution3
0 2015-04-24 21:23:04
At first animation-name is an experimental technology as you can check here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name
Second, every animation needs keyframes, which you don't have in your code, you can try using css transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.