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>
Related
Demo on CodePen
<pre>
.parent
border: 1px solid tomato
height: 300px
margin: 0 auto
margin-top: 30px
width: 80%
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
.box-1
background-color: lightblue
right: 60vw
animation-duration: 6s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
.box-2
background-color: lightgreen
right: 70vw
animation-duration: 8s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
</pre>
As you can see in the demo, the animation speed of the cube is slowing down the closer it gets to the bottom.
I'd like to make animation the same speed during the fall.
Thank you.
The default animation-timing-function in CSS is ease - accelerate in the start, slow after the middle. You need a linear timing function, that has a constant speed.
Change the box timing function to linear (pen):
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linear
You can use animation function linear. Have a look at the snippet below:
.parent {
border: 1px solid tomato;
height: 300px;
margin: 0 auto;
margin-top: 30px;
width: 80%;
}
.box {
width: 50px;
height: 50px;
position: absolute;
animation-name: falling;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box-1 {
background-color: lightblue;
right: 60vw;
animation-duration: 6s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
.box-2 {
background-color: lightgreen;
right: 70vw;
animation-duration: 8s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
Hope this helps!
New to coding here. I'm practicing with CSS, and I'm trying to create a simple animation. The twist: I want the height of a div to change, but the animation anchors the height change at the top of the div, and I need it to anchor at the bottom. I've been looking around and saw the transform-origin element, but that doesn't seem to help, as it is not a transform, but a change in height. I also tried rotating the div 180degrees but that didn't work either.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
.rowleteyeleft {
height: 100px;
width: 50px;
border-radius: 50%;
background-color: hsl(46, 6%, 21%);
position: relative;
right: -70px;
top: 70px;
overflow:hidden;
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction:alternate;}
#keyframes blinkleft {
to {height: 10px}
</style>
</head>
<body>
<div class="rowleteyeleft"></div>
</body>
</html>
What do I need to add to it to get the height to anchor at the bottom?
Use Pseudo-elements
.rowleteyeleft {
height: 100px;
width: 50px;
position: relative;
right: -70px;
top: 70px;
overflow: hidden;
}
.rowleteyeleft:before {
content:"";
position:absolute;
bottom: 0;
border-radius: 50%;
width:100%;
height:100%;
background-color: hsl(46, 6%, 21%);
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes blinkleft {
to {
height: 10px
}
}
<div class="rowleteyeleft"></div>
This demo shows you what is doing on behind the animation
.wrapper {
height: 100px;
width: 50px;
left: 70px;
top: 70px;
position: relative;
/*this help us animate the child from the bottom*/
overflow: hidden;
border: 1px dashed hsl(46, 6%, 21%);
}
.rowleteyeleft {
height: 10px;
width: 100%;
left: 0;
bottom: 0px;
position: absolute;
border-radius: 50%;
background-color: hsl(46, 6%, 21%);
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes blinkleft {
to {
height: 100px
}
}
<div class=wrapper><!--give your animated element a parent-->
<div class="rowleteyeleft"></div>
</div>
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;
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.
i'm trying to mimic a loading function for this animation, so i want the end point of the animation to be the top right edge of the browser.
how do i do this? ie what can i replace "left:1000" with to always be the top right edge of the browser.
.square {
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
#-webkit-keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
solution is to use both left and margin-left
JSFIDDLE DEMO
.square
{
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
top: 0px;
margin-left:-30px;
}
#keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
#-webkit-keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
position:absolute; and right:0 will take you to the right edge of the browser.
.square{
position:absolute;
}
#keyframes colors{
from{
left:0;
top: 0px;
}
to{
right:0;
}
}
After running this, I am assuming you're trying to do something like how YouTube has that loading bar. If so, trying adding this line to your ".square" class.
top: 0px;
And then just remove the "relative" positioning, and change it to "fixed".
Hope that helps, but might not even be related to your problem.