I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.
.line {
width: 5rem;
height: 1px;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
transform: rotate(90deg);
animation: stand linear 1s;
}
#keyframes stand {
0% {width: 0;}
100% {width: 5rem;}
}
<div class="line"></div>
That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.
.line {
width: 1px;
height: 5rem;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
animation: stand linear 1s;
}
#keyframes stand {
0% {height: 0;}
100% {height: 5rem;}
}
<div class="line"></div>
The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.enter code here
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.Stack {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="Stack"></div>
</body>
</html>
Related
Hello everyone.
I have started making a small app in Electron, and want to make a loading screen.
But every time I add the animation to the container div, it gives its background color weird color banding.
Here's an image of it.
Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.
Here's an image with the animation disabled.
What I tried:
Ran the website in Edge, did produce the color banding.
Ran the website in the snippet, did not produce the color banding.
Tried setting the background color in the animation itself, did not fix the problem.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&family=Roboto&display=swap');
:root {
--main1: #282b30;
--main2: #1e2124;
--main3: #16181a;
--titleFont: 'Nunito', sans-serif;
--textFont: 'Roboto', sans-serif;
--textColor: #ffffff;
}
* {
font-family: var(--textFont);
color: white;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
.transitionContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--main2);
color: var(--textColor);
font-size: 500%;
animation-name: hideTransition;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-delay: 1.25s;
animation-fill-mode: both;
opacity: 1;
}
#keyframes hideTransition {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
}
#keyframes showTransition {
from {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
to {
transform: scale(1);
opacity: 1;
z-index: 0;
}
}
.logoText {
position: absolute;
top: 50%;
left: 50%;
margin-left: -49.258px;
margin-top: -96px;
}
.loadingBarBack {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
background-color: var(--main3);
}
.loadingBarFront {
width: 0%;
height: 100%;
background-color: limegreen;
animation: loading 1s;
animation-fill-mode: forwards;
}
#keyframes loading {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="./index.js" defer></script>
</head>
<body>
<div class="transitionContainer">
<h1 class="logoText">R</h1>
<div class="loadingBarBack">
<div class="loadingBarFront"></div>
</div>
</div>
</body>
</html>
Thanks for any help in advance!
Figured it out!
Apparently animation-fill-mode: both; caused some of the div to go transparent before the animation even played.
Setting it to animation-fill-mode: forwards; fixed it.
I'd like to animate the top of a div which is filled with a blue sea like color.
And I'd like the animation to feint little sea waves. Knowing that my displaying is for a very little resolution (120px width).
I tried with particles-js, and it was cool to learn how to add a motion effect, but it doesn't make my top section looking like sea waves.
And then I tried with CSS, trying to understand some existing code and the best I've done for the moment is that:
:root {
--bg-color: #dfffa9;
--wave-color: #0048ff;
--animation-time: 4s;
--max-height: 15px;
--circle-offset: -1.5%;
--wave-width: 55%;
--height-wave-up: 109%;
--height-wave-down: 100%;
--top-wave-up: 60%;
--top-wave-down: 40%;
--border-radius-right-up: 100% 50%;
--border-radius-left-up: 50% 100%;
}
body {
margin: 0;
overflow: hidden;
background: var(--wave-color);
}
.container {
position: relative;
height: 10vh;
background: var(--bg-color);
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: var(--max-height);
background: var(--bg-color);
animation: beWavy var(--animation-time) infinite linear;
}
.wave::before,
.wave::after {
content: "";
display: block;
position: absolute;
border-radius: var(--border-radius-right-up);
width: var(--wave-width);
}
.wave::before {
height: var(--height-wave-up);
background-color: var(--wave-color);
right: var(--circle-offset);
top: var(--top-wave-up);
animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
height: var(--height-wave-down);
background-color: var(--bg-color);
left: var(--circle-offset);
top: var(--top-wave-down);
animation: beWavyAfter var(--animation-time) infinite step-end;
}
#keyframes beWavy {
0% {
animation-timing-function: ease-in;
height: var(--max-height);
}
25% {
animation-timing-function: ease-out;
height: 0;
}
50% {
animation-timing-function: ease-in;
height: var(--max-height);
}
75% {
animation-timing-function: ease-out;
height: 0;
}
100% {
animation-timing-function: ease-in;
height: var(--max-height);
}
}
#keyframes beWavyBefore {
25% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-right-up);
}
}
#keyframes beWavyAfter {
25% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-right-up);
}
}
<?php
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sea level</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<section class="container">
<div class="wave"></div>
</section>
But 2 waves only seems really repetitve and low cost haha. I want random waves with random starting points.
So if someone could help me understand how it works exactly, thanks.
I am trying to move a horizontal line from right to left and when it while it moves it's length should reduce and become zero.
I tried with animation but it happening in loop. It should happen only once.
Here is the code which I tried
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 2;
animation-direction: initial;
overflow-y: hide;
}
#keyframes myfirst {
0% {
background: black;
left: 0px;
top: 0px;
}
100% {
background: white;
left: 100%;
top: 0px;
}
}
<div></div>
Is this correct or there is better way to achieve it?
Adding image for more clarity. Here on load black line has width 100% with time it's width reducing.
Without seeing it in a Codepen it's kinda hard to tell what's going on.
The correct animation property for one count would be animation: myfirst 10s 1;
However if that doesn't work, can you try adding animation-iteration-count: 1;?
Try to set this one:
div{
animation: myfirst 10s 1;
}
The last parameter of "animation" is for animation iteration count and you have it defined as "2".
Try swapping the values of left from the below section and it will give you your desired result. And for iteration count you can set the value here animation: myfirst 10s 2; from 2 to 1.
0% {
background: black;
left: 100%; -->this one
top: 0px;
}
100% {
background: white;
left: 0px; --> this one
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 1;
animation-direction: initial;
overflow-y: hide;
}
#keyframes myfirst {
0% {
background: black;
left: 100%;
top: 0px;
}
100% {
background: white;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
I was wondering if it is possible to hide parts of an image that is positioned with negative px?
Essentially I would like to hide the image part on the very right of the screen that goes past the pink div and purple div. I would also like to hide the image part that goes downwards into the purple part. So only the image on the pink div is visible.
snippet of animation
I have used the animation property to set the positions on page load.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
position: relative;
top: -100px;
left: -100px;
}
100% {
position: relative;
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
position: absolute;
bottom: -100px;
right: -150px;
}
100% {
position: absolute;
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2" /></div>
</div>
<div id="div2">
</div>
</body>
</html>
You need to add position: relative to the parent container (div1 in this case) and overflow:hidden to hide the part of the images which goes outside the div. Also remove the position property from the keyframes because it's not used.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
top: -100px;
left: -100px;
}
100% {
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
bottom: -100px;
right: -150px;
}
100% {
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2"><!-- typo here -->
</div>
</div>
<div id="div2">
</div>
</body>
</html>
I am trying to make a simple animation where a paragraph tag loops around a div. Currently, I can't get the animation to play at all. After some looking, I saw a few other questions on SO where the solution was to add vendor prefixes. I'm on Chrome, so I added that prefix. That didn't work. I saw another where I needed to add the vendor prefix to the animation property, so I tried that. That didn't work, either.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<main>
<div class="box">
<p class="animated">Hello</p>
</div>
</main>
</body>
</html>
And my css in css/main.css:
.box {
width: 500px;
height: 500px;
background-color: #ddd;
}
#keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
#-webkit-keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
p {
display: inline-block;
background-color: red;
color: white;
padding: 10px;
margin: 0;
}
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s linear infinite;
}
I have a codepen of it here: http://codepen.io/khall47/pen/pNogKz
When you change the left/top property values on an element, it needs to have a position or else nothing happens, so ..
..give the .animated rule position: relative; and it will work fine.
Updated codepen: http://codepen.io/anon/pen/gLOrwy
Side note, always put prefixed properties before non-prefixed in your CSS rules
Just add to your paragraph. It's because it's not declared in relative that it doesn't move. (neither on firefox)
position: relative;
In addition to other answers, if you want to have the same animation-timing-function for all the browser, you should give the same for all in .animated CSS block.
They both should be either:
.animated {
animation: around 4s linear infinite;
-webkit-animation: around 4s linear infinite;
}
or
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s ease-out infinite;
}