I am trying to animate a simple object in my site from left to right on the viewport but cannot figure out whats wrong with my code. Trying to do it in Microsoft VS Code.
code is produced below
.ball {
border: 5px solid red;
height: 200px;
width: 200px;
border-radius: 50%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
animation-name: moveBall;
animation-duration: 5s;
animation: alternate;
}
#keyframes moveBall {
from {
top: 0;
left: 0;
}
to {
left: 100%;
}
}
<div class="ball"></div>
would appreciate if someone can help me point out the problem in the code that is preventing the ball from moving from left to right.
You accidentally assigned animation: alternate. It is a shorthand that overrides the animation-name.
What you want is animation-direction: alternate
FYI, animation-direction: alternate will not work if the animation-iteration-count is 1(default), so you may also want to assign animation-iteration-count: 2 or animation-iteration-count: infinite etc.
.ball {
border: 5px solid red;
height: 200px;
width: 200px;
border-radius: 50%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
animation-name: moveBall;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes moveBall {
from {
top: 0;
left: 0;
}
to {
left: 100%;
}
}
<div class="ball"></div>
Use ---> ''' Animations-direction'''
. In place of---> Animation
Related
CSS ::after if visible at the start then disappearing in the middle and reappearing at the end why? I want it to be visible throughout the animation equally like a horizontal slider
Here is my code:
.btn {
all: inherit;
position: relative;
font-size: 6rem;
}
.btn::after {
overflow: visible !important;
content: "";
position: absolute;
top: 0;
left: -5%;
height: 100%;
width: 2%;
background-color: greenyellow;
animation-name: LeftToRight;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes LeftToRight {
0% {
left: -5%;
}
100% {
left: 105%;
}
}
<button class="btn">UNIVERSE</button>
I wanted to create two balls that are falling against a black background, but the black background does not show. When I remove the two balls, the background shows. What am I doing wrong here?
.balls{
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
background-color: #efebf2;
animation-iteration-count: infinite;
animation-name: fall;
animation-duration: 3s;
}
.ball1{
left:30%;
animation-timing-function: ease-in;
}
.ball2{
left:60%;
animation-timing-function: ease-out;
}
#keyframes fall{
0%{
top:10%;
}
100%{
top: 50%;
{
}
.sky{
height:100%;
width: 100%;
margin: 0;
position: fixed;
top: 0;
left: 0;
background-color: black;
}
</head>
<body>
<div class="sky"></div>
<div class="balls ball1"></div>
<div class="balls ball2"></div>
</body>
You have a typo in your css: The open brace ({) after top:50%; should be a closed brace (}).
I would like to do some simple animations of 4 <div>. However, its really recursive as the propery animation: animate 1s forwards are the same for all, and the only property changing is the animation-delay which just follows a basic increment. Are there any better ways to do this? Thanks in advance!
div:nth-child(1) {
position: absolute;
width: 50px;
height: 50px;
background-color: maroon;
top: 0;
animation: animate 1s forwards;
animation-delay: 0.2s;
}
div:nth-child(2) {
position: absolute;
width: 50px;
height: 50px;
top: 70px;
background-color: maroon;
animation: animate 1s forwards;
animation-delay: 0.2s;
}
div:nth-child(3) {
position: absolute;
width: 50px;
height: 50px;
background-color: maroon;
top: 140px;
animation: animate 1s forwards;
animation-delay: 0.3s;
}
div:nth-child(4) {
position: absolute;
width: 50px;
height: 50px;
background-color: maroon;
top: 210px;
animation: animate 1s forwards;
animation-delay: 0.4s;
}
#keyframes animate{
from{
left: 0;
}
to{
left: 10vw;
}
}
This is why SCSS is used. Here is an example: https://sass-lang.com/documentation/at-rules/control/for. Final result in compiled CSS file would be the same, but you can generate styles in SCSS without hard coding them, through loops and with variables.
You can group the code though, by creating a class that every child would have:
.common-styles-class-name {
position: absolute;
width: 50px;
height: 50px;
background-color: maroon;
animation: animate 1s forwards;
}
div:nth-child(1) {
top: 0;
animation-delay: 0.2s;
}
div:nth-child(2) {
top: 70px;
animation-delay: 0.2s;
}
div:nth-child(3) {
top: 140px;
animation-delay: 0.3s;
}
div:nth-child(4) {
top: 210px;
animation-delay: 0.4s;
}
I am trying to stagger the opacity (fade) of three boxes via an infinite keyframe animation and the animation-delay property.
I am getting some unexpected behavior, as the third box fades away, it suddenly reappears faintly ("flickers") before the animation starts again. I am experiencing this across browsers.
I would like to use pseudo elements if possible, is there a known fix for this keyframe bug?
HTML
<div class="container">
<div class="child">
<div></div>
</div>
</div>
SCSS
.container {
position: fixed;
left: 150px;
top: 50px;
.child {
position: absolute;
animation:mymove 1s infinite;
&::before{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: inherit;
animation-delay: .15s;
}
div {
width: 25px;
height: 25px;
background-color: red;
animation: inherit;
animation-delay: .30s;
}
&::after{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: inherit;
animation-delay: .45s;
}
}
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
JS Fiddle
The reason they flicker is because you have set an animation on their parent, the child.
And since its animation doesn't have a delay, it starts before its children, but will then be overridden by them as soon as their delay has passed, hence one can see a quick flash.
The best way to avoid any future issue with this, is to remove the animation from the child
.container {
position: fixed;
left: 150px;
top: 50px;
}
.container .child {
position: absolute;
}
.container .child::before {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: mymove 1s infinite;
animation-delay: 0.15s;
}
.container .child div {
width: 25px;
height: 25px;
background-color: red;
animation: mymove 1s infinite;
animation-delay: 0.3s;
}
.container .child::after {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: mymove 1s infinite;
animation-delay: 0.45s;
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="container">
<div class="child">
<div></div>
</div>
</div>
So I'm trying to somehow do two animations on one element but I can't be able to fix it.
Here is a jsfiddle which includes only the important things. For the full picture, check here. I want to make the alien which represents the letter L coming in from the right to left (= the position where he is now at).
So what I want to get is that the alien moves from right to left, but together with the moving legs, and the image of the alien.
I will explain some of the code.
HTML:
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
.monster_L represents the image of the alien
.Benen_L represents the legs (=benen)
CSS
/*Monster L*/
.monster_L img {
position: absolute;
bottom: 296px;
left: 596px;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
bottom: 293px;
left: 597px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
bottom: 286px;
left: 605px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 613px;
}
/*Been4*/
.B_4 {
left: 621px;
}
#keyframes animation_B_1 {
0%{ bottom: 293px; }
50% { bottom: 286px; }
100%{ bottom: 293px; }
}
#keyframes animation_B_2 {
0%{ bottom: 286px; }
50% { bottom: 293px; }
100%{ bottom: 286px; }
}
You have to apply position: absolute to letter_L and apply a keyframe to it for its translation with the right property.
However when you apply position: absolute or position: relative to letter_L, all position: absolute elements inside are not going to be relative to letter_L. So you have change the top, bottom, left coordinates accordingly.
I have tried to solve this for you.
Check updated fiddle.
Refer code:
.letter_L {
width: 100px;
position: absolute;
/* z-index: 100000000; */
height: 90px;
animation-name: moveRTL;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Monster L*/
.monster_L img {
position: absolute;
top: 0;
left: 0;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
top: 32px;
left: 0;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
top: 32px;
left: 8px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 16px;
}
/*Been4*/
.B_4 {
left: 24px;
}
#keyframes animation_B_1 {
0% {
top: 28px;
}
50% {
top: 32px;
}
100% {
top: 28px;
}
}
#keyframes animation_B_2 {
0% {
top: 32px;
}
50% {
top: 28px;
}
100% {
top: 32px;
}
}
#keyframes moveRTL {
0% {
right: 0;
}
100% {
right: 200px;
}
}
<!-- L letter -->
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>