[英]JS Canvas: How to make rectangle go back and forth once it reaches the boundary
[英]How to make transition go back and forth once
我听说过多次发生动画/过渡。 我需要一个过渡,该过渡一次更改宽度,然后在暂停两秒钟后再次更改(再次间隔三秒钟)。 我该怎么做?
这是我的代码:
<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>
img { width:200px; height:100px; animation: widthChange 3s 2s; -webkit-animation: widthChange 3s 2s; -moz-animation: widthChange 3s 2s; -0-animation: widthChange 3s 2s; } 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;} }
<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>
使用%
和animation-delay
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.