I'm trying to animate slowly appearing text in css and I can't make it fluid... It consists of 3 words and will smoothly do the first word, but the next 2 words just pop into existence.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not really my first website</title>
</head>
<body>
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
</body>
</html>
.header{
width: 100%;
top: 50%;
position: top;
left: 40%;
border-bottom: 5px solid greenyellow;
overflow: hidden;
animation: animate 2s linear forwards;
}
.header h1 {
color: green;
}
#keyframes animate {
0% {
width: 0px;
height: 0px;
}
20% {
width: 50px;
height: 0px;
}
50% {
width: 50px;
height: 80px;
}
}```
No need for height in the keyframe, the problem is that the h1 is a block element and it breaks the words because of width 0px, but if you put in a white-space: nowrap; it should be fine, also position: top; is not valid, not sure what your trying there.
PS i you want he h1 to be green, first the element then the class selector h1.header {color: green;}
.header {
white-space: nowrap;
overflow: hidden;
border-bottom: 5px solid greenyellow;
animation: animate 2s linear forwards;
}
h1.header {
color: green;
}
#keyframes animate {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
If I get your means correctly It's because you have use 50px width in your key frame and it can only appear first word you can change that
Related
I used <div> to make a color changing background, but the background covers the image I have. How can I make the <div> stay in the background?
(Btw I know in my code there's 2 sections for color but deleting either of them makes the colors not work.) Here's what it looks like when run: https://the-hampsterdog-dance.glitch.me/
thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
#dog {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</head>
</html>
You could either move the dog image inside <div id="dog"></div> or target the body rather than #dog for the background color animation. Both approaches will work.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
body {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</html>
Elements later inside the DOM (Document Object Model, essentially your HTML) usually are positioned on top of elements earlier. So the easiest solution is to switch the order of your img and div.
If this is not possible for whatever reason, you can change the layering in CSS using z-index. The higher it’s value, the more the affected element gets on top. E.g. for #dog:
z-index: 99;
You could do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<style>
.foreground {
z-index: 790909;
}
body{
-webkit-animation: change 10s infinite;
}
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change {
25% {
background-color: blue;
}
50% {
background-color: green;
}
75% {
background-color: purple;
}
}
#dog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<img class="foreground" src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809" width="140" height="100" alt="DANCE THE NIGHT AWAY" />
<div id="dog"></div>
</body>
</html>
I've been searching this question on Stack Overflow. I've tried but my text align doesn't work, it's just null. tried to use display: block, width: 100% and whatever I could find, but I unfortunately got no luck. I got no error messages whatsoever. as of right now, I have no clue on what is causing it
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1{
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="script.js"></script>
</body>
</html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {background-color: red;}
to {background-color: orange;}
}
</style>
</head>
<body>
<h1 class="center">Denied</h1>
<div></div>
</body>
</html>
So, if you are learning web development then it's ok to make mistakes.
The thing you were doing wrong is just the whole format of the code
body,html,head
These are just used 1 time and you just used them as divs
What you should have done was like this -
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>e</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
body {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
</style>
</head>
<body>
<div>
<h1 class="center">Denied</h1>
</div>
</body>
<script src="script.js"></script>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");
/*bg*/
img.bg {
min-height: 100%;
min-width: 104px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1 {
font-family: "Source Sans Pro", sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
font-size: 112px;
padding-bottom: 20px;
text-align: center;
display: block;
width: 100vw;
}
Your syntax of writing the code was very wrong
and I think you would have wanted the heading h1 inside the div like this-
<div>
<h1 class="center">Denied</h1>
</div>
and not leaving the div empty for no reason at all
After all this the main thing due to which you were not able to center it through text-align: center; was, you just had to take width as 100vw and not 100%
`width: 100vw;`
means you are taking the width of the element in respect of the screen means-
if you are viewing your website through a desktop whose width = 600px then your <h1 class="center">Denied</h1> width will be equal to the width of the screen which is 600px
At Last I would suggest you see the syntax of the html and css properly
A Quick Tip - if you are using VSCode for writing code you can just write ! on an empty HTML file and it will automatically write the HTML template with `head, body,HTML and all that stuff.
You have pasted your html code twice in your answer and this is making a mess to understand your code. Although your question is quite simple and I have answered in as simplest way as I can.
You should set text-align property to a parent div or span instead of direct HTML tag.
And while giving animation please don't give it a width if you want you items to be at center, for clarity see the attached snippet
.denied{
width:100%;
text-align: center;
}
body {
background-color: red;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes example {
from {
background-color: red;
}
to {
background-color: orange;
}
}
<div class="denied">
<h1>Denied</h1>
</div>
I'm creating a scene with a bunch of scrolling layers (foreground, midground, background etc...) but annoyingly I get a flicker on Safari (14.0.3) when the animation restarts. This doesn't occur on Chrome or Firefox.
I've created a minimum reproducible example here:
https://brendon.github.io/safari_flicker/index.html
Here's the code:
.animation {
position: relative;
height: 395px;
background-image: linear-gradient(#1b9dd9, #00b6ed 44%, #ffe56c 75%);
}
.animation .scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
}
.animation .scrollingAnimation:before {
content: "";
position: absolute;
height: 100%;
width: 200%;
}
.animation .foreground:before {
/* Dimensions: */
/* width: 1696px; */
/* height: 74px; */
min-width: 6784px;
background-image: url("https://brendon.github.io/safari_flicker/foreground.png");
background-position: left bottom -11px;
background-repeat: repeat-x;
background-size: auto 74px;
transform: translateX(-1696px);
animation: foreground 10s linear infinite;
}
#keyframes foreground {
0% {
transform: translateX(-1696px);
}
to {
transform: translateX(-3392px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
</body>
</html>
Here is a video of the issue:
https://github.com/brendon/safari_flicker/raw/main/flicker_video.mp4
I've tried many things to get rid of the issue. It seems to sometimes go away depending on the window width, but I'm looking for a solid solution :D
The issue also exists on iOS Safari.
I should mention that I don't want to animate the background-position property as this causes performance problems and isn't accelerated by the GPU.
Have you thought about using 2 elments with the same image and animation, and offsetting - using delay - the first elements animation by -duration / 2 ?
The idea being that at all times there's one of them on screen and any render delay shouldn't be visible.
See below, I'm animating two pseudo elements.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.animation, .foreground {
height: 100%;
width: 100%;
background: black;
}
.foreground:before, .foreground:after {
height: 100%;
width: 200%;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 50vmin;
}
.foreground {
position: relative;
overflow-x: hidden;
}
.foreground:before {
content: 'A';
background: red;
animation: 10s linear -5s infinite foreground;
}
.foreground:after {
content: 'B';
background: blue;
animation: 10s linear 0s infinite foreground;
}
#keyframes foreground {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
I ended up using GSAP fromTo() to manage the transition work instead of relying on the CSS animation:
<div class="foreground scrollingAnimation"><div></div></div>
gsap.fromTo(
'.foreground > div',
{ xPercent: -25 },
{ xPercent: -50, duration: 10, repeat: -1, ease: 'none' }
)
.scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
> div {
position: absolute;
height: 100%;
}
}
.foreground {
> div {
width: calc(1696px * 4);
background: {
image: url("https://brendon.github.io/safari_flicker/foreground.png");
position: left bottom;
repeat: repeat-x;
size: auto 74px;
}
}
}
It breaks down on very wide screens, but really, if you're rocking a 6000px wide window, good luck to you sir.
The way GSAP animates is that it changes the translateX value via javascript during a requestAnimationFrame (I think) so it's nice and smooth, and the flicker problem doesn't exist in this context.
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 2 years ago.
First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.
The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.
Here is my code:
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation-name: div-text-hover;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes div-text-hover {
0% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
100% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect.
But when I hover, the background changes instantly like this:
I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color
. I found no way to do this with background.
EDIT: I tried out adding #keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(
For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
position: relative;
z-index: 1;
overflow: hidden;
}
#div-text::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s ease;
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
opacity: 0;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
position: relative;
z-index: 3;
}
#div-text:hover::after{
opacity: 1;
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
I think, it will be helpful for you.
I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.
#keyframes div-text-hover {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
background-size: 400% 400%;
-webkit-animation: div-text-hover 2s ease infinite;
animation: div-text-hover 2s ease infinite;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
</body>
</html>
I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:
Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.
I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change.
Instead you can try this :-
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation: hover-animation 2s infinite ease-in;
}
#keyframes hover-animation{
0%{
background: #2d2e31;
}
100%{
background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
}
}
I too am a beginer so this is not a perfect code. So you might want to make changes to it.
And sorry if i have made any mistake.Let me know how it works out.
Thank you.