This code takes a ball and moves it to the right and back again. How can I get it to move to the right, and stay there?
http://codepen.io/chriscoyier/pen/pBCax
You can fiddle with a Live version of the output there.
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
#keyframes move {
50% {
top: 200px;
left: 130px;
}
}
The css code says 'infinite' and when I delete that, it moves the ball to the right, and then back to where it was one time. I'd like it to move to the right, and just stay there.
Replace infinite with forwards and add a from and to to your #keyframes
Adjust the top, left values as necessary.
See below:
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease forwards;
}
#keyframes move {
from {
top: 0px;
left: 10px;
}
to {
top: 200px;
left: 130px;
}
}
<h1>Animate with Top/Left</h1>
<div id="animate"></div>
Here you go:
animation: move 3s ease forwards;
http://codepen.io/anon/pen/yebvZx
You can read about the animation-fill-mode property here:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode
forwards -
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.
Your are looking for:
animation-fill-mode: forwards;
Related
The keyframes aren't making the block move. I'm new to using keyframes so I'm bad at it.
#block{
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block is infinite linear;
}
#keyframes block{
0%{left:480px;}
100%{left: -40px;}
}
I fixed your code using the examples on developer.mozilla.org. I hope this is the expected behavior.
animation-iteration-count: infinite; will make the animation repeat forever.
animation-name defines the identifier used in #keyframes.
animation-duration specifies how many seconds or milliseconds the animation takes to complete.
See also https://www.w3schools.com/cssref/css3_pr_animation.asp.
#block{
width: 20px;
height: 20px;
background-color: blue;
position: absolute;
top: 130px;
left: 480px;
animation-duration: 3s;
animation-name: block;
animation-iteration-count: infinite;
}
#keyframes block {
0% {
left: 480px;
}
100% {
left: -40px;
}
}
<div id="block"></div>
I have a container div with an object inside of it. I can animate one property of it, e.g. bottom, OR left, but can't animate BOTH at the same time.
How does one animate both properties at the same time so it moves diagonally? I don't understand why the following code does not work:
#container {
position: relative;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
/*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
animation: move 2.5s linear 0s infinite;
}
It does move diagonally:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
You can consider translation to have the same movement with better performance:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { transform:translate(0,0) }
100% { transform:translate(125px,-125px) }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
I'm trying to make a strikethrough animation like the effect here:
The strike line appears from left to right and disappears from left to right.
#keyframes strike {
0% {
width: 0;
}
50% {
width: 100%;
}
100% {
width: 0;
}
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: fill;
animation-direction: normal;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Is there a way to achieve that only with CSS ?
You can use transforms and transform-origin in the keyframe animation to make strike-through apear from left to right and disapear from left to right.
The point is to scale the pseudo element on the X axis for 0 to 1 with a transform origin on the left then back to 0 with a transform origin on the right (similar to this hover effect see last example of the answer).
And here is an example with your markup :
#keyframes strike{
0% { transform-origin: 0% 50%;transform:scaleX(0); }
50% { transform-origin: 0% 50%;transform:scaleX(1); }
50.01% { transform-origin:100% 50%;transform:scaleX(1); }
100% { transform-origin:100% 50%;transform:scaleX(0); }
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation: strike .75s ease-in-out forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Here is a sample using transition, where it on hover toggle left/right position.
.strike {
position: relative;
}
.strike::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
background: black;
}
.strike:hover::after {
right: 0;
left: 100%;
transition: right .5s .0s, left .5s .5s;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
I have a problem with CSS currently.
https://jsfiddle.net/k9cfdofv/1/
There you can see that the
stripe (parallelogram) comes from the bottom, but it goes a little bit to right before it goes in that state I want it.
So I want it come from the bottom and go to the top without this shift at the end.
CSS-Code:
.stripe {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
animation: ani 1s linear 1 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
It can be done by setting a transform-origin for element to be skewed to left bottom.
div {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
transform-origin: left bottom;
animation: ani 1s linear 10 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
<div>
</div>
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.