When transitioning the background-image (which I thought is not possible before) there are different results in Chrome and Firefox. Firefox does the expected and just instantly replaces the background-image, but Chrome adds a fade to the transition. Although it is fancy, it adds some unwanted functionality. So how to remove/disable it for every visitor who is using Chrome?
Didn't find any solutions via search engines, but maybe I just don't know the correct keyword for this topic.
To see what I mean you can open the following example in different browsers.
#keyframes test {
0% {
background-image: url("https://placeimg.com/640/480/arch");
}
50% {
background-image: url("https://placeimg.com/640/480/tech");
}
100% {
background-image: url("https://placeimg.com/640/480/arch");
}
}
div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 300px;
background-size: cover;
background-position: center center;
animation: test 3s infinite;
}
<!DOCTYPE html>
<html>
<body>
<div></div>
</body>
</html>
Edit: I'm not searching for a workaround or other solution, I want to understand the cause and how to solve this problem. Thanks for the workaround answers tho.
Using content property of <img> tag desired result is achieved.
#keyframes test {
0% {
content:url("https://placeimg.com/640/480/tech"); }
50% {
content: url("https://placeimg.com/640/480/arch");
}
100% {
content: url("https://placeimg.com/640/480/tech");
}
}
img{
-webkit-animation: test 3s infinite;
<!DOCTYPE html>
<html>
<body>
<img>
</body>
</html>
try this, I think u want it this way
#keyframes test {
0% {
background-image: url("https://placeimg.com/640/480/arch");
}
49% {
background-image: url("https://placeimg.com/640/480/arch");
}
50% {
background-image: url("https://placeimg.com/640/480/tech");
}
99% {
background-image: url("https://placeimg.com/640/480/tech");
}
100% {
background-image: url("https://placeimg.com/640/480/arch");
}
}
Related
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
my #keyframe CSS code seems alright. its not giving error yet its not showing at all on the browser.
the classname on html is img1.
somebody help
.img1 {
width: 150px;
animation-name: pics;
animation-duration: 25s;
animation-iteration-count: 1;
background-image: url("assets/pic1.png");
background-repeat: no-repeat;
background-size: 100%;
margin-top: 19px;
margin-bottom: 19px;
}
#keyframes pics {
0% {
background-image: url("assets/pic8.jpg");
}
12.5% {
background-image: url("assets/pic1.png");
}
25% {
background-image: url("assets/pic2.png");
}
37.5% {
background-image: url("assets/pic3.jpg");
}
50% {
background-image: url("assets/pic4.jpg");
}
62.5% {
background-image: url("assets/pic5.jpg");
}
75% {
background-image: url("assets/pic6.jpg");
}
87.5% {
background-image: url("assets/pic7.jpg");
}
100% {
background-image: url("assets/pic8.jpg");
}
}
Your animation is working, but as #Yudiz says you need to set a height to your .img1 element.
background-image property is setting a background image to your element, but il will not change his size depending of your background-image size. Right now, your .img1 element is 150px large, and 0px tall, so it's invisible.
Please take a look at my attached picture.
What I want to achieve is, that the Rectangle you see (lets think of it as a div), has a background-image (chess-pattern) just like the parent (entire image). The thing is, the child (Black Rect), should only draw the part of the background-image, where it is overlapping with the parent (To process further effects e.g. blur).
So i fought if there would be a css trick to:
Only draw the clip of an image where it is overlapping with the parent (also could be the entire body) or
Have a dynamically CSS functionality to get its own position and calc the image-position it has to show. ( e.g. something like background-position: [Position-X-Of-Div] 100px;)
I'm glad for any help! Please feel free to ask, if something is not clear.
If that is not possible, I'm also willing to switch to sass, less
With a pseudo element, you could do something like this
Unfortunately CSS does not have a built-in function to calculate a value from both itself and its parent in the way needed in this case, so you'll need a script to adjust the inner::before left/top value relative to the inner left/top, so the former is a negative of the latter.
(function() {
window.addEventListener("load", function() {
var el = document.querySelector('.inner');
el.classList.add('moveme');
});
})();
.outer {
position: relative;
width: 95vh;
height: 95vh;
background: url(https://i.stack.imgur.com/gcSoj.jpg) center center / cover no-repeat;
}
.inner {
position: absolute;
left: 10vh;
top: 10vh;
width: 40vh;
height: 30vh;
overflow: hidden;
}
.inner::before {
content: '';
position: absolute;
left: -10vh;
top: -10vh;
width: 95vh;
height: 95vh;
background: url(https://i.stack.imgur.com/gcSoj.jpg) center center / cover no-repeat;
-webkit-filter: blur(5px);
filter: blur(5px);
}
.inner.moveme {
animation: moveme 3s linear forwards;
}
.inner.moveme::before {
animation: moveme2 3s linear forwards;
}
#keyframes moveme {
from { transform: translate(0,0); }
to { transform: translate(20vh,20vh); }
}
#keyframes moveme2 {
from { transform: translate(0,0); }
to { transform: translate(-20vh,-20vh); }
}
<div class="outer">
<div class="inner"></div>
</div>
I had an animation to loop through several background images...
#keyframes loop-background {
0% { background-image: url('1.jpg'); }
17% { background-image: url('2.jpg'); }
34% { background-image: url('3.jpg'); }
51% { background-image: url('4.jpg'); }
68% { background-image: url('5.jpg'); }
85% { background-image: url('6.jpg'); }
100% { background-image: url('7.jpg'); }
}
On the first run through, there would be a brief flash between each image while they loaded. Then the flash would disappear. Why?
I've tried several fixes involving applying needless transforms to the element hosting the animation, including:
position: static;
will-change: background-image;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
position: fixed; -webkit-transform: translate3d(0, 0, 0); together
So far, nothing's worked.
Of course! Because the images were taking a little time to load.
I added a hidden div in front of my main one that had each of the images set as a background as well.
<div id="dummy" hidden></div>
<style>
#dummy {
display: none;
background-image: url("1.jpg";), url("2.jpg";), url("3.jpg";), url("4.jpg";), url("5.jpg";), url("6.jpg";);">
}
</style>
Late answer, but putting the first image as last seems to work nice !
0% { background-image: url('1.jpg'); }
Why this isn't working? What am I doing wrong?
CSS
#-webkit-keyframes test {
0% {
background-image: url('frame-01.png');
}
20% {
background-image: url('frame-02.png');
}
40% {
background-image: url('frame-03.png');
}
60% {
background-image: url('frame-04.png');
}
80% {
background-image: url('frame-05.png');
}
100% {
background-image: url('frame-06.png');
}
}
div {
float: left;
width: 200px;
height: 200px;
-webkit-animation-name: test;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
DEMO
http://jsfiddle.net/hAGKv/
Updated for 2020: Yes, it can be done! Here's how.
Snippet demo:
#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
#keyframes changeBg{
0%,100% {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>
Background image [isn't a property that can be animated][1] - you can't tween the property.
Original Answer: (still a good alternative)
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
It works in Chrome 19.0.1084.41 beta!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
Works for me.
Notice the use of background-image for transition.
#poster-img {
background-repeat: no-repeat;
background-position: center;
position: absolute;
overflow: hidden;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
This is really fast and dirty, but it gets the job done: jsFiddle
#img1, #img2, #img3, #img4 {
width:100%;
height:100%;
position:fixed;
z-index:-1;
animation-name: test;
animation-duration: 5s;
opacity:0;
}
#img2 {
animation-delay:5s;
-webkit-animation-delay:5s
}
#img3 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img4 {
animation-delay:15s;
-webkit-animation-delay:15s
}
#-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
#keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
}
}
I'm working on something similar for my site using jQuery, but the transition is triggered when the user scrolls down the page - jsFiddle
I needed to do the same thing as you and landed on your question. I ended up taking finding about the steps function which I read about from here.
JSFiddle of my solution in action (Note it currently works in Firefox, I'll let you add the crossbrowser lines, trying to keep the solution clean of clutter)
First I created a sprite sheet that had two frames. Then I created the div and put that as the background, but my div is only the size of my sprite (100px).
<div id="cyclist"></div>
#cyclist {
animation: cyclist 1s infinite steps(2);
display: block;
width: 100px;
height: 100px;
background-image: url('../images/cyclist-test.png');
background-repeat: no-repeat;
background-position: top left;
}
The animation is set to have 2 steps and have the whole process take 1 second.
#keyframes cyclist {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
}
}
Thiago above mentioned the steps function but I thought I'd elaborate more on it. Pretty simple and awesome stuff.
Your code can work well with some adaptations :
div {
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: contain;
animation: animateSectionBackground infinite 240s;
}
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
Here is the explanation of the percentage to suit your situation:
First you need to calculate the "chunks". If you had 8 differents background, you need to do :
100% / 8 = 12.5% (to simplify you can let fall the decimals) => 12%
After that you obtain that :
#keyframes animateSectionBackground {
00% { background-image: url(/assets/images/bg-1.jpg); }
12% { background-image: url(/assets/images/bg-2.jpg); }
25% { background-image: url(/assets/images/bg-3.jpg); }
37% { background-image: url(/assets/images/bg-4.jpg); }
50% { background-image: url(/assets/images/bg-5.jpg); }
62% { background-image: url(/assets/images/bg-6.jpg); }
75% { background-image: url(/assets/images/bg-7.jpg); }
87% { background-image: url(/assets/images/bg-8.jpg); }
}
If you execute this code, you will see the transition will be permanantly. If you want the backgrounds stay fixed while a moment, you can do like this :
#keyframes animateSectionBackground {
00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}
That mean you want :
bg-1 stay fixed from 00% to 11%
bg-2 stay fixed from 12% to 24%
etc
By putting 11%, the transtion duration will be 1% (12% - 11% = 1%).
1% of 240s (total duration) => 2.4 seconds.
You can adapt according to your needs.
The linear timing function will animate the defined properties linearly. For the background-image it seems to have this fade/resize effect while changing the frames of you animation (not sure if it is standard behavior, I would go with #Chukie B's approach).
If you use the steps function, it will animate discretely. See the timing function documentation on MDN for more detail. For you case, do like this:
-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
See this jsFiddle.
I'm not sure if it is standard behavior either, but when you say that there will be only one step, it allows you to change the starting point in the #keyframes section. This way you can define each frame of you animation.
Like the above stated, you can't change the background images in the animation. I've found the best solution to be to put your images into one sprite sheet, and then animate by changing the background position, but if you're building for mobile, your sprite sheets are limited to less than 1900x1900 px.
I needed to do the same thing recently. Here's a simple implementation
#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
#keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
<div id="wrapper">
<img src="img1.jpg" class="top" style="z-index:2;">
<img src="img2.jpg" style="z-index:1;">
</div>
You can use animated background-position property and sprite image.
You can follow by this code:
#cd{
position: relative;
margin: 0 auto;
height: 281px;
width: 450px;
}
#cf img{
left: 0;
position: absolute;
-moz-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
opacity: 0;
}
<div id="cf">
<img class="button" src="Birdman.jpg" />
<img src="Turtle.jpg" class="top" />
</div>
You can use the jquery-backstretch image which allows for animated slideshows as your background-images!
https://github.com/jquery-backstretch/jquery-backstretch
Scroll down to setup and all of the documentation is there.
Well I can change them in chrome. Its simple and works fine in Chrome using -webkit css properties.
I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(images/arrowup.png);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
background-repeat: no-repeat;
background-position: center;
background-color: #ECEEEF;
border-color: #999;
}
I wish to rotate the image without rotating its content.
Very well done and answered here – http://www.sitepoint.com/css3-transform-background-image/
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
transform: rotate(30deg);
}
Very easy method, you rotate one way, and the contents the other. Requires a square though
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Update 2020, May:
Setting position: absolute and then transform: rotate(45deg) will provide a background:
div {
height: 200px;
width: 200px;
outline: 2px dashed slateBlue;
overflow: hidden;
}
div img {
position: absolute;
transform: rotate(45deg);
z-index: -1;
top: 40px;
left: 40px;
}
<div>
<img src="https://placekitten.com/120/120" />
<h1>Hello World!</h1>
</div>
Original Answer:
In my case, the image size is not so large that I cannot have a rotated copy of it. So, the image has been rotated with photoshop. An alternative to photoshop for rotating images is online tool too for rotating images. Once rotated, I'm working with the rotated-image in the background property.
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
Good Luck...
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
#keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: I've found this somewhere else but don't remember the source
I was looking to do this also. I have a large tile (literally an image of a tile) image which I'd like to rotate by just roughly 15 degrees and have repeated. You can imagine the size of an image which would repeat seamlessly, rendering the 'image editing program' answer useless.
My solution was give the un-rotated (just one copy :) tile image to psuedo :before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated :before element using css3 transforms. Bosh!
try making a div for the image only and then flipping it with transform: scaleY(-1); or transform: scaleX(-1);
if you want to have the navbar in front of the image you can make an overlapping div and set its opacity property to 0;
I tried all solutions but none helped, below is what was my problem and how I solved it:
Problem: we have an image for desktops with landscape orientation but To show the same image but rotated (portrait) for mobile screens.
How: I just rotated the actual image in my assets folder the way I wanted (portrait), and then just used media queries to call that image for my background for mobiles, and that's it.
(this was the easiest and quick solution I did.)
Update Dec 2021
Since the original question is
"..rotate the background image .."
The best answer looks to be here
https://stackoverflow.com/a/62135576/3446280