<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.move_in {
animation-duration: 1s;
animation-fill-mode: forwards; /* 动画播放一次定格到结尾 */
animation-name: slidein;
}
@keyframes slidein {
from {
transform: translate(-500px, 0);
}
to {
transform: translate(0, 0);
}
}
.move_out {
animation-duration: 1s;
animation-fill-mode: forwards; /* 动画播放一次定格到结尾 */
animation-name: slideout;
}
@keyframes slideout {
from {
transform: translate(0, 0);
}
to {
transform: translate(-500px, 0);
}
}
#left {
width: 500px;
height: 300px;
background-color: aquamarine;
position: relative;
left: 500px;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<body>
<div id="left" class="move_in">
</div>
</body>
<script>
$('#left').on('click', function () {
if ($("#left").hasClass("move_out")) {
return $('#left').removeClass('move_out').addClass('move_in')
}
if ($("#left").hasClass("move_in")) {
return $('#left').removeClass('move_in').addClass('move_out')
}
})
</script>
</html>