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 (}).
Related
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
Originally, just for the logo alone, I used fixed positioning since the divs for each square would not be in the right place otherwise. With a fixed position, they won't go into my inner div box though. The inner and outer div boxes have colour just so I can see them at the moment. Does anyone know of a way to make the position for my divs relative whiel still keeping them in the right position for the animation so they cross over and are symmetrical?
<!DOCTYPE html>
<html>
<head>
<style>
div.outer {
top: 0%;
left: 0%;
margin: 0 auto;
width: 100%;
height: 100%;
position: fixed;
background-color: red;
opacity: 0.5;
}
div.inner {
width: 60%;
height: 60%;
top: 25%;
margin: 0 auto;
position: relative;
background:orange;
}
body {
display: block;
height: 100%;
}
div.a {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
animation-name: raveA;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.b {
width: 200px;
height: 200px;
background-color: red;
position: relative;
animation-name: raveB;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.c {
width: 200px;
height: 200px;
background-color: green;
position: relative;
animation-name: raveC;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.d {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
animation-name: raveD;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes raveA {
0% {background-color:blue; left:0px; top:0px;}
50% {background-color:red; left:230px; top:230px;}
100% {background-color:rgb(240,101,43); left:55px; top:20px; transform:skewX(-10deg);}
}
#keyframes raveB {
0% {background-color:red; left:250px; top:250px;}
50% {background-color:yellow; left:20px; top:20px;}
100% {background-color:rgb(247,189,0); left:230px; top:230px; transform:skewX(-10deg);}
}
#keyframes raveC {
0% {background-color:green; left:0px; top:250px;}
50% {background-color:blue; left:230px; top:20px;}
100% {background-color:rgb(0,174,233); left:20px; top:230px; transform:skewX(-10deg);}
}
#keyframes raveD {
0% {background-color:yellow; left:250px; top:0px;}
50% {background-color:green; left:20px; top:230px;}
100% {background-color:rgb(140,189,0); left:265px; top:20px; transform:skewX(-10deg);}
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</div>
</body>
</html>
I am trying to experiment with CSS Animation and made a simple page transition effect using only Css animation. The problem is when the animation completes, a slight flicker is created. Can you guys suggest some thing to fix this?
Codepen link- https://codepen.io/jake2917/pen/qyzxva?editors=1100
Here is the code.
The problem start when i try to center the h1 tag.
body {
margin: 0;
padding: 0;
}
#line {
border: 0.5px solid #130f40;
opacity: 0;
width: 0;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
top: 50%;
animation-name: run;
animation-duration: 1s;
transition: 0.1s ease-in;
}
#container1 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
top: -110%;
transition: 0.2s ease-in;
animation-name: cover1;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#container2 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
bottom: -110%;
transition: 0.2s ease-in;
animation-name: cover2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes run {
from {
width: 0;
opacity: 0;
}
to {
width: 99%;
opacity: 1;
}
}
#keyframes cover1 {
0% {
top: -10%;
opacity: 0;
height: 0;
}
100% {
top: 0%;
opacity: 1;
height: 50vh;
}
}
#keyframes cover2 {
0% {
bottom: -110%;
opacity: 0;
height: 0;
}
100% {
bottom: 0%;
opacity: 1;
height: 50vh;
}
}
// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
text-align: center;
}
<div id="line"></div>
<div id="container1">
<h1>hello there</h1>
</div>
<div id="container2">
<h1>hello there</h1>
</div>
It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}
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>
I have this HTML:
<div id="container">
<div id="content">
<h2 class="frame1">Loriam Ipisum</h2>
<h2 class="frame2">Loriam Ipisumsad</h2>
</div>
</div>
And this CSS:
body{margin: 0; padding: 0;}
#container{
width: 100%;
top: 200px;
border: 1px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
#content{
width: 300px;
height: 50px;
border: 1px solid blue;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content h2{
position: relative;
display: inline-block;
}
#content h2.frame1{
-webkit-animation-delay: 0s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#content h2.frame2{
-webkit-animation-delay: 3s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes efeito1{
0%{
left: 0;
opacity: 0;
}
50%{
opacity: 0.4;
left: 100px;
opacity: 0.4;
left: 200;
}
100%{
opacity: 0;
left: 300px;
opacity: 0.4;
}
}
What I want to do is: I want both .frames be at the same LINE. SO when I apply the animation, it will happen at the same place, giving a nice effect. I want them to be at the same line, at the same place but without one text be upon the other looking like a mess...
I tried to use the overflow: Hidden: but didn't work, the texts stays one above the other...
I want to apply, this effect: http://codepen.io/anon/pen/LcwKj/
Any suggestion? Thanks !
Is this effect what you are aiming for:
HTML
<div id="container">
<div id="content">
<h2 class="frame1">Loriam Ipisum</h2>
<h2 class="frame2">sad</h2>
</div>
</div>
CSS
body{margin: 0; padding: 0;}
#container{
width: 100%;
top: 200px;
border: 1px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
#content{
width: 100%;
height: 50px;
border: 1px solid blue;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content h2{
position: absolute;
display: inline-block;
}
#content h2.frame1{
-webkit-animation-delay: 0s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
opacity:0;
}
#content h2.frame2{
-webkit-animation-delay: 3s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
opacity:0;
position:absolute;
}
#-webkit-keyframes efeito1{
0%{
opacity: 0;
}
100%{
opacity: 100;
}
}