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>
Related
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>
I have 2 images with transparent background and need to put one on top of each other with the same positioning:
1 spinning (underneath)
1 fixed (above)
I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.
I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.
I suppose the background-size property should be involved but didn’t manage to use it properly.
Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.
Many thanks.
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: absolute;
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
Something like this?
EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.
I centred the animated image using text-align:center and centred the fixed image using position: absolute
I set both images to 30% width relative their parent .engine-container
The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container {
text-align: center;
position: relative;
}
.engine-rotating,
.engine-fixed {
width: 30%;
}
.engine-fixed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
<img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
</div>
</div>
UPDATE
Heres what I came up with:
A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
text-align: center;
position: relative;
}
.engine-rotating{
}
.engine-container::after{
content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin{
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin{
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
</div>
</div>
Set position for .engine-complete::after to relative
.engine-complete::after {position: relative}
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: relative; /* this was changed */
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
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!
This custom graphic need to fill with three different colors. Every color will be filled with 1-100%. So blue color will be filled from leg to head ( 1-100% ), red color will be filled from bottom of the head to top of the head ( 1-100% ) and so the orange color. Can this possible using svg / canvas or any other way?
CSS animation method
Segment the three different color sections with different divs. Position it in the HTML according to the priority or give it z-index regardless of the markup.
Sub divide the color sections for creating the holder and filling up background. Although this can be created with :before and :after I have used nested divs.
Create a fill-up key frame animation which transitions from 0% height to 100% height. More info about the filling up animation can be found in these answers: CSS Wipe up animation
The animation-delay needs to be calculated before, according to the number of shapes you have. If the first shape has a animation duration of 2s, give the next shape animation-delay of 2s which creates a sequential effect.
Manipulate the border-radius, position, width and height values to get the desired shape and position.
Edit: Updated with a status indicator in Codepen
Codepen Demo
body {
background: lightgray;
}
/* Red Filler */
.red-filler {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
overflow: hidden;
}
.red-liquid {
width: 100%;
position: absolute;
bottom: 0;
animation: fill-up 6s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #E63B44;
}
/* Orange Filler */
.orange {
z-index: -1;
position: absolute;
}
.orange-filler-1 {
background: lightgray;
border-radius: 50%;
width: 200px;
height: 200px;
border: 10px solid white;
position: relative;
top: -50px;
overflow: hidden;
}
.orange-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 3s;
background: #EC952E;
overflow: hidden;
}
.orange-filler-2 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
border-color: white;
border-image: none;
border-style: none solid solid;
border-width: 0 10px 10px;
height: 100px;
left: 50px;
overflow: hidden;
position: relative;
top: -74px;
width: 100px;
}
.orange-liquid-2 {
animation: fill-up 3s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #EC952E;
position: absolute;
bottom: 0;
width: 100%;
}
/* Blue Filler */
.blue {
z-index: -2;
position: absolute;
top: 40px;
}
.blue-filler-1 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 250px;
overflow: hidden;
position: relative;
width: 260px;
left: -20px;
top: -10px;
}
.blue-liquid-1 {
width: 100%;
position: absolute;
bottom: 0;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-delay: 4s;
background: #566EB1;
overflow: hidden;
}
.blue-filler-2 {
background: lightgray none repeat scroll 0 0;
border-radius: 50%;
height: 275px;
left: -25px;
overflow: hidden;
position: relative;
top: -100px;
width: 275px;
}
.blue-liquid-2 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
animation-delay: 2s;
}
.blue-filler-3 {
background: lightgray none repeat scroll 0 0;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 110px;
left: 35px;
overflow: hidden;
position: relative;
top: -125px;
width: 150px;
}
.blue-liquid-3 {
animation: fill-up 2s ease forwards;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
background: #566EB1;
position: absolute;
bottom: 0;
width: 100%;
}
/* Container for centering */
.container {
margin: 0 auto;
width: 500px;
margin-top: 50px;
}
/* Animation Keyframe */
#keyframes fill-up {
0% {
height: 0;
}
100% {
height: 100%;
}
}
<div class="container">
<!-- Red container -->
<div class="red">
<div class="red-filler">
<div class="red-liquid"></div>
</div>
</div>
<!-- Orange container -->
<div class="orange">
<div class="orange-filler-1">
<div class="orange-liquid-1"></div>
</div>
<div class="orange-filler-2">
<div class="orange-liquid-2"></div>
</div>
</div>
<!-- Blue container -->
<div class="blue">
<div class="blue-filler-1">
<div class="blue-liquid-1"></div>
</div>
<div class="blue-filler-2">
<div class="blue-liquid-2"></div>
</div>
<div class="blue-filler-3">
<div class="blue-liquid-3"></div>
</div>
</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;
}