With using html/css, How can i expose a moving image after selecting a radio button.
I have tried with the following code, i am able move the text but it always present,i want it to expose after i make a selection.
for example, if i make a selection of phone radio button, small phone's moving image should pops up from left of screen.
#rdiv {
margin: 50px;
}
#fradio {
margin: 15px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
#sradio {
margin: 5px 10px 20px 180px;
font-family: fantasy;
color: chartreuse;
}
#keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
#fsale {
vertical-align: middle;
color: aqua;
position: relative;
top: 70%;
font-size: 3.5em;
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;
/* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#-webkit-keyframes example {
0% {
color: red;
left: 0px;
top: 0px;
}
25% {
color: yellow;
top: 200px;
}
50% {
color: blue;
top: 100px;
left: 200px;
}
75% {
color: green;
left: 400px;
top: 200px;
}
100% {
color: red;
left: 600px;
top: 100px;
}
}
#image1 {
background-image: url(https://hikaricosmetics.com/wp-content/uploads/2014/07/Cabernet-lips-565x565.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="rdiv">
<label id="fradio">
<input type="radio" name="editList" value="never" />phone
</label>
<div id="image1"></div>
<label id="sradio">
<input type="radio" name="editList" value="costChange" />headphones
</label>
</div>
<p id="fsale">This should be image unpon selection of radio button</p>
</body>
</html>
Use another #keyframe to define animation and trigger that by using #fradio input:checked{} and #sradio input:checked{}
if you use less or sass just need to input keyframes codes inside the #fradio input[type="radio"]:checked
#fradio input[type="radio"]:checked {
#keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
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'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
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.
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.
I am facing an issue in css3 animation in IE11 only.
Here is link with issue (please open in ie11)
$(document).ready(function() {
$(".spinnerTinyBar").show();
$("#toggle").click(function() {
$(".spinnerTinyBar").toggle();
});
});
#keyframes tinybar-load1 {
0% {
box-shadow: 0 0 blue;
height: 20px;
}
40% {
box-shadow: 0 -15px blue;
height: 25px;
}
80% {
box-shadow: 0 0 blue;
height: 20px;
}
100% {
box-shadow: 0 0 blue;
height: 20px;
}
}
.spinnerTinyBar,
.spinnerTinyBar:before,
.spinnerTinyBar:after {
background: blue;
animation: tinybar-load1 1s infinite ease-in-out;
width: 2px;
height: 20px;
}
.spinnerTinyBar:before {
left: -5px;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinnerTinyBar {
font-size: 9px;
position: relative;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
transform: translateZ(0);
}
.spinnerTinyBar:after {
left: 5px;
}
.spinnerTinyBar:before,
.spinnerTinyBar:after {
position: absolute;
top: 0;
content: "";
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="toggle" value="Toggle" />
<div class="spinnerTinyBar"></div>
JSFiddle
Issue:
For first time, the animation is working good. When I toggle by clicking on toggle button the animation is not happening for 1st and last bar. This is working fine in chrome and in all mobile devices.
Let me know if anybody figured it out and do the needful
It's a weird one this but here's a fix:
Change your html to this:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".spinnerTinyBar").show();
$("#toggle").click(function(){
$(".divClass").toggleClass('spinnerTinyBar');
});
});
</script>
<input type="button" id="toggle" value="Toggle"/>
<div class="divClass spinnerTinyBar"></div>
</body>
Instead of hiding the element we simply change the class on it to show the animation, or not
Here's an updated fiddle working in ie11
Try this little hack for your IE
#media screen and (min-width: 0\0) {
.your-animation-parent {
transform: translate3d(0, 0, 0);
}
}