This question already has answers here:
CSS3 background image transition
(13 answers)
Closed 4 months ago.
When I put my mouse over it, the background image shows up in an instant. I want to show a gradual trasition. How can I fix this?
.category__mid {
min-height: 260px;
width: 200px;
border: 2px solid #000;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 1);
background-blend-mode: lighten;
transition: all 0.9s ease;
}
.category__mid:hover {
background-color: rgba(255, 255, 255, 0);
background-blend-mode: normal;
}
<div class="category__mid" style="background-image: url('https://i.postimg.cc/NG159gHv/pexels-kampus-production-8439682.jpg')">
<h3>I want to show transition on hover. NOT when the user leaves</h3>
</div>
change the css as
.category__mid {
min-height: 260px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255,255,255,1);
background-blend-mode: lighten;
}
.category__mid:hover {
background-color: rgba(255,255,255,0);
transition: all 0.9s ease ;
}
Change the css to;
.category__mid {
min-height: 260px;
width: 200px;
border: 2px solid #000;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255,255,255,1);
background-blend-mode: lighten;
transition: all 0.9s ease;
}
.category__mid:hover {
animation: fade-in 0.9s ease;
background-color: rgba(255,255,255,0);
}
#keyframes fade-in {
0% {
background-blend-mode: lighten;
}
100% {
background-blend-mode: normal;
}
}
Unfortunately you can't transition the background image of a div.
but you can use an animation.
Related
creating a landing page I have a map with pinpoints. theses pinpoints are just a span that through an animation I change styles. animation working just fine in fire-fox and chrome.
where I use this.changeClassName(place.style) as a variable to start animation.
The problem is safari the image properties arent working.
I noticed That
background-repeat: no-repeat; // is not working
background-size: contain // I think it isn't working
render (){
return (
<span key={`${place.name}-${place.style}`}
className={`dot ${this.changeClassName(place.style)}`}
>
</span>
}
)
// the scss
.dot {
width: 1.8rem;
height: 1.8rem;
display: flex;
border-radius: 50%;
background-color: $tangerine-yellow;
&-gt {
margin: 0.2rem 0 0 1.5rem;
&.start-animation {
-webkit-animation: dotTop 4000ms ease-out 500ms forwards;
animation: dotTop 4000ms ease-out 500ms forwards;
}
}
#keyframes dotTop {
0% {
background-image: url('../assets/icons/pin.svg');
// -webkit-background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: transparent;
border: none;
transform: translateY(-300px);
}
50% {
background-image: url('../assets/icons/pin.svg');
// -webkit-background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 7rem;
height: 7rem;
background-color: transparent;
border: none;
border-radius: 50%;
transform: translateX(-50px);
top: -10rem;
}
55% { border-radius: 50%; }
57% { background-image: none; }
59% { border: none; backgroung-color: transparent }
60% { background-color: $tangerine-yellow }
70% { border-radius: 50%; }
100% {
width: 1.8rem;
height: 1.8rem;
background-image: none;
// background-color: red;
}
}
I'm trying to create an animated background fill effect (still learning animation) but the fill color jumps quickly before it reaches the end of the div. What's the issue and how to fix it? Thanks in advance.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
animation: makeItfadeIn 3s 1s;
animation-fill-mode:forwards;
}
#-webkit-keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
#keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
<div class="outer">
<div class="button">
</div>
</div>
Background inside the animation is the culprit. You simply need to animate the position from right to left:
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 0);
background-size: 200% 100%;
background-position: right;
animation: makeItfadeIn 3s 1s forwards;
}
#keyframes makeItfadeIn {
100% {
background-position: left;
}
}
<div class="outer">
<div class="button">
</div>
</div>
Related to get more details: Using percentage values with background-position on a linear-gradient
I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
i'm recently experiencing an issue with white blocks appearing on the top/bottom of site whenever i scroll it a greater bit. The white blocks are part of body background, because changing body backgroundcolor makes blocks change color too.
I have already tried setting opacity for body but this gave no effect at all... Any ideas what could possibly be going wrong? Or maybe i just have too heavy transition/fade content so that rendering doesn't work smooth?
Here's the screenshot of the issue, pretty hard to catch on ss since it only happens for half sec when scrolling. The block is indicated by red arrows.
EDIT:
I'd actually post parts of my css file, maybe this would bright any clue:
html, body {
height: 100%;
position: static;
overflow-x:hidden;
-webkit-transform: translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.06);
transform: translate3d(0,0,0);
}
.heroEffects .bg {
-webkit-backface-visibility: hidden;
transform: scale(1);
-webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
-moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
transform: translate3d(0,0,0);
}
.bgimg {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1);
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
-moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("../img/gallery/slonecz.jpg");
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 5s;
-webkit-animation-delay: 5s
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
transform: translate3d(0,0,0);
}
#keyframes backgroundchangeFadeInOut {
0% {
background-image: url("../img/gallery/slonecz.jpg");
}
15% {
background-image: url("../img/gallery/slonecz.jpg");
}
30% {
background-image: url("../img/gallery/slonecz.jpg");
}
42% {
background-image: url("../img/gallery/slonecz.jpg");
}
50% {
background-image: url("../img/gallery/motyl.jpg");
}
68% {
background-image: url("../img/gallery/motyl.jpg");
}
80% {
background-image: url("../img/gallery/motyl.jpg");
}
95% {
background-image: url("../img/gallery/motyl.jpg");
}
100% {
background-image: url("../img/gallery/slonecz.jpg");
}
}
.heroEffects .shade {
opacity: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 3;
height: 100vh;
position: fixed;
width: 100%;
}
And here's Vimeo vid, the screen recorder seems to be on top and you can actually see what happens when the browser with this site is in the background... https://vimeo.com/198493320
In my case using overflow: hidden; on body worked.
body {
overflow: hidden;
}
this works for me on chrome 76.0.3809.87
overflow: auto;
hope it can help.
I wanted to animate a the text fill with CSS. The Text should be filled with color from left to right.
this is my CSS:
.box-with-text {
background-image: -webkit-linear-gradient(right, crimson 50%, white 50%);
background-repeat: repeat;
background-position: 0 0;
background-size: 200% 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes normal forwards ease-in-out;
animation: stripes 2s normal forwards ease-in-out;
}
Now only the first letter is color-filled.
here is the fiddle
you may also take a look at flex (for centering things) and mix-blend-mode, so it can be avalaible also for Firefox:
.box-with-text {
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
background: black;
display: table;
color: white;
mix-blend-mode: multiply
}
#-webkit-keyframes stripes {
to {
background-size:100% 100%;
}
}
#keyframes stripes {
to {
background-size:100% 100%;
}
}
html {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
height: 100%;
background: black;
}
body {
margin: auto;
background: -webkit-linear-gradient( crimson , crimson) turquoise no-repeat 0 0;
background: linear-gradient( crimson , crimson) turquoise no-repeat 0 0;
background-size: 0 100%;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
<div class="box-with-text">
Text
</div>
http://codepen.io/gc-nomade/pen/XKNKzd
/* Main styles */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
.box-with-text {
background-image: -webkit-linear-gradient(left, crimson 50%, white 50%);
background-repeat: repeat;
background-position: 0 0;
background-size: 100% 200px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
#-webkit-keyframes stripes {
100% {
background-position: 0 -50px;
}
}
#keyframes stripes {
100% {
background-position: 385px 0;
}
}
/* Other stuff */
body {
overflow: hidden;
background: #000;
color: #FFF;
}
.box-with-text {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font: bold 26vmax/.8 Open Sans, Impact;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="box-with-text">
Text
</div>
In this case you should change
#keyframes stripes {
100% {
background-position: 385px 0;
}
}
position depends on text width;