7
Tôi có hình ảnh mà tôi muốn kéo dài trong 3 giây, sau đó tạm dừng trong 2 giây, sau đó ngắt kết nối trong 3 giây. Khi nó đứng, tôi không biết làm thế nào để tạm dừng nó; hoạt ảnh chậm trễ chỉ hoạt động ở đầu hoạt ảnh chứ không phải ở giữa. Dưới đây là mã của tôi:Cách tạm dừng ở giữa hoạt ảnh/chuyển tiếp
<!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>