If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
Related
This question already has an answer here:
Text blended over background color
(1 answer)
Closed 1 year ago.
how can I change the color of the text when using mix-blend-mode in CSS ?
Here is the code: https://jsfiddle.net/1nyah2zf/
What I have:
What I want:
Thanks !
code
I do not think mix-blend-mode would be what you need here :
From your example you could do it otherwise with background attachement :
example of the idea:
body {
margin: 0;
display: flex;
}
.left {
width: 200px;
height: 200px;
background: green;
}
.right {
width: 200px;
height: 200px;
background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
background-size: 200px;
}
.text {
position: absolute;
left: 100px;
top: 70px;
font-size: 50px;
animation-name: animation;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: infinite;
background: linear-gradient(90deg, black 200px, white 200px) fixed;
color: transparent;
background-clip: text;
}
#keyframes animation {
0% {
left: 100px;
}
50% {
left: 140px;
}
100% {
left: 100px;
}
}
<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO!</div>
without background-attachement, then move the text only
I am making a page-loader in CSS and i want to appear the logo with sliding overlay to right, like the loading bar but here want to make loading logo instead of bar. So here is my code
.underlay{
width: 300px;
height:300px;
margin-left: 300px;
margin-top: 15%;
}
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 15%;
left: 300px;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
}
<div class="outer">
<div class="underlay">
<img src="logo.png" alt="loading logo">
</div>
</div>
I expect to slide it underlay:before to slide to right slowly
#Ahtsham Ul Haq: Try this code hope it will work for you!
.outer {
transition: all 0.3s linear;
}
.underlay img {
width: 300px;
height:300px;
display: block;
left: 10px
/* margin-left: 300px; */
/* margin-top: 15%; */
}
.underlay:before{
content: "";
width: 300px;
height: 300px;
position: absolute;
top: 10px;
/* left: 300px; */
z-index: 99;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s linear;
}
.outer:hover .underlay:before {
width: 0;
}
<div class="outer">
<div class="underlay">
<img src="https://i.ibb.co/8M3cFG4/bbb.jpg" alt="loading logo">
</div>
</div>
I have this and it works for me. Thanks for helping me out #Asiya Fatima
.underlay:before{
content:"";
width: 300px;
height:300px;
position: absolute;
top: 200px;
left:0;
z-index: 99;
background: rgba(0,0,0,0.9);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: linear;
}
#-webkit-keyframes slide{
0%{
left:510px;
}
100%{
left:850px;
}
}
I'm trying to create the effect of an opening door in css.
The issue I'm having is that the part which rotates also slides along the y axis. A door has a fixed rotation point, which is not really working here.
How can I prevent this sliding and ensure that the right part of the div .mover stays fixed to the right of the div .door?
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
}
.door:hover .mover {
transform-origin: 100% 40%;
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Move the transform-origin to the base .mover selector, instead of the .door:hover .mover selector. Like this:
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
transform-origin: 100% 40%;
}
.door:hover .mover {
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Consider this sample.
http://jsfiddle.net/dfabulich/ncbzz5zu/3/
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; right: 0; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
Expected: The red rectangle should smoothly animate from left to right as the color changes from red to blue.
Actual: In Chrome/Firefox, the red rectangle slowly changes color to purple, then teleports from left to right without animating, and then slowly changes from purple to blue. In Safari, the rectangle appears on the right and never moves from there, while animating from red to blue.
Why is this happening? How can I fix it? (I need to fix it in CSS… no JS, no jQuery.)
You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.
Also need to animate background color.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation: 3s linear 0s slide infinite;
}
#keyframes slide {
from { left: 0; }
to {
left: 100%;
transform: translateX(-100%);
background: blue;
}
}
<div class=container>
<div class=animated>
</div></div>
The problem is that you start animating property left, but then replace it with right in the end of animation, that's why it jumps. You should keep animating the same property to get the step by step animation progression.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; left: 80%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
<div class="container"><div class="animated"></div></div>
#keyframes slide {
from { left: 0;}
to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like: left: calc(100% - ##px);
}
Simply when you used right you told transition to change totally different property. That is why you were jumping between left: 0 what is left side of your screen to right: 0 what is right edge of your screen.
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
0% { background-color: red; left: 0; }
100% { background-color: blue; left: 100%; margin-left: -20%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
see this snippet...
This is what it should look like:
http://jsfiddle.net/ncbzz5zu/11/
And this is the fix for it:
#keyframes slide {
from { background-color: red;
left:0%;}
to { background-color:blue;
left:80%;}
}
Basically, the animation didnt know what to do since you specified the initial left property but not the target value. It animated from left:0 to left:initial. Right fulfills a similar function to left but its still another property.
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 0.5s ease;
}
.box:hover + .circle {
opacity: 1;
}
<body>
<div class="box">
</div>
<div class="circle">
</div>
</body>
Here, when I hover over .box, .circle fades in in 0.5s.
Now when I move my cursor away from .box, I want .circle to fade out at a different speed (say, 1s). How to make it happen?
You need to set the off duration on the non-hover state, and the on duration on the hover.
That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply.
Once you hover off, the properties set on the normal element apply.
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 2s ease;
}
.box:hover + .circle {
opacity: 1;
transition-duration:0.5s
}
<div class="box"></div>
<div class="circle"></div>