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!
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>
https://codepen.io/jenny0515/pen/MWOMWEy
If you open the code pen link, you'll see that if you hover over one of the cubes that are rotating, it will pause but the other cubes will continue to rotate; and when you move the cursor from the cube, it will rotate again but in a different position to the one it started with.
What I'm trying to do, however, is to pause all of the cubes by only hovering on one of the cubes, and when I move it away from the cube it was on, it should begin to rotate again from where it paused.
Code Preview:
.cube:hover{
width: 100px;
height: 100px;
animation-play-state: paused;
}
I'm only using the :hover selector but maybe there's another option in CSS to accomplish this instead of in JavaScript?
Because sibling selectors are rather limited in their usage in these cases it's a lot easier to work with parents.
I could not reproduce your rotation problem, works fine here (Chrome).
.div{
position: absolute;
width: 500px;
height: 500px;
border: 3px solid chartreuse;
border-radius: 300px;
left: 500px;
top: 100px;
}
.circle{
position: absolute;
width: 30px;
height: 30px;
border: 3px solid chartreuse;
border-radius: 20px;
left: 230px;
top: 230px;
}
.cube{
position: absolute;
width: 50px;
height: 50px;
border: 5px solid violet;
left: -180px;
top: -15px;
transform-origin: 200px;
animation: rotate 6s linear infinite;
}
.stop_anim/*:nth-child(n+1)*/:hover .cube{
width: 100px;
height: 100px;
//cursor: pointer;
/*animation: float 3s ease-in-out alternate infinite;
transform: translatey(0px);*/
animation-play-state: paused;
}
.cube:nth-of-type(2){ //wrong IF space before nth;
animation-delay: 2s;
border-color: aqua;
}
/*.cube:nth-of-type(2):hover{
width: 100px;
height: 100px;
cursor: pointer;
animation-play-state: paused;
}*/
.cube:nth-of-type(3){
animation-delay: 4s;
border-color: aquamarine;
}
/*.cube:nth-of-type(3):hover{
width: 100px;
height: 100px;
cursor: pointer;
animation-play-state: paused;
}*/
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
<div class="div">
<div class="circle">
<div class="stop_anim">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</div>
</div>
I've spent the past hour trying to find a way to get a sliding animation from bottom to top using only CSS. It's supposed to be a test tube with fluid filling it. (This is what I want it to look like), however during the animation it overflows around the edges at the bottom and doesn't sit flush (like this).
HTML & CSS:
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
margin-left: 2px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 22px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border"></div>
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
You can move the #fluidLeft and #fluidRight divs into the #border div. That way, you can add "overflow: hidden" on to the border div (now the parent) which will make it so the fluid divs (now children of the border div) don't overlap outside of the border. I also tweaked the "margin-left" on the fluids by 2px so it was centered in the tube.
.testTube #border {
width: 40px;
height: 150px;
margin-top: 15px;
background-color: white;
border: 2px solid black;
border-radius: 5px 5px 25px 25px;
position: absolute;
overflow: hidden;
}
.testTube #fluidLeft {
width: 20px;
height: 100px;
background-color: #ff007f;
border-radius: 0% 0% 0% 25px;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.testTube #fluidRight {
width: 20px;
height: 0px;
margin-left: 20px;
background-color: #ff1a8c;
border-radius: 0% 0% 25px 0%;
position: absolute;
animation-name: fluid;
animation-direction: normal;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes fluid {
from {
height: 0px;
margin-top: 167px;
}
to {
height: 100px;
margin-top: 67px;
}
}
<div class="testTube">
<div id="border">
<div id="fluidLeft"></div>
<div id="fluidRight"></div>
</div>
</div>
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>
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}