JS Fiddle: https://jsfiddle.net/e9o4x13s/
I am trying to achieve an effect in which the square expands from 0 to 300 width and them to 0 again but the direction of the latter should happen from left to right instead of right to left which happens in the demo.
.square {
width: 300px;
height: 300px;
background-color: #345;
animation: reveal 2s forwards;
}
@keyframes reveal {
0% {
width: 0;
}
50% {
width: 300px;
}
100% {
width: 0;
}
}
<div class="square"></div>
SamA74
September 18, 2017, 11:56am
2
One way would be to use absolute positioning. But possibly better would be to use a transform (scale) to do the animation and adjust the transform-origin to suit.
…and here is another possible way …
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
.square {
width: 18.75em;
height: 18.75em;
background-color: #345;
animation: reveal 2s forwards;
}
@keyframes reveal {
0% {
width: 0;
}
50% {
width: 18.75em;
margin-left: 0;
}
100% {
width: 0;
margin-left: 18.75em;
}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
coothead
1 Like
PaulOB
September 18, 2017, 2:20pm
4
I’d probably go with coothead’s example but just for fun here’s another method
Animations are always smoother with translate rather than using margin, width or positioning.
2 Likes
system
Closed
December 20, 2017, 7:06pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.