I have a div with a background image that I would like to inflate using CSS3 webkit-keyframes.
I tried animating using background-size, but it looks like CSS3 (or at least Safari webkit) doesn't animate background-size.
How can I rewrite this code to get the same effect (i.e. I would like the image to inflate from the center of the div)?
Some simple vanilla javascript would also be okay, but I'd prefer a pure-CSS solution.
HTML:
<div id="image"></div>
CSS:
div#image
{
background: url('../img/image.png');
background-repeat: no-repeat;
background-position: center;
width: 125px;
height: 252px;
position: absolute;
left: 170px;
top: 260px;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
-webkit-transform: translateZ(0);
-webkit-animation-duration: 4s;
-webkit-animation-name: pop_image;
}
#-webkit-keyframes pop_image
{
0% {background-size: 0%;}
25% {background-size: 0%;}
48% {background-size: 100%;}
100% {background-size: 100%;}
}
Edit:
I also tried animating on -webkit-transform: scale(), but that didn't work either.
Edit 2:
So, animating on -webkit-transform: scale() worked, I just needed to refresh my browser.
Here is the CSS3 keyframe:
#-webkit-keyframes pop_keys
{
0% {-webkit-transform: scale(0,0);}
25% {-webkit-transform: scale(0,0);}
48% {-webkit-transform: scale(1,1);}
100% {-webkit-transform: scale(1,1);}
}
You can use css. scale and animate the images to scale up:
http://jsfiddle.net/DvVug/1/
EDIT:
Updated so the image doesn't 'jump' back to original size
Related
This question already has an answer here:
How can I apply css transitions to a background image change?
(1 answer)
Closed 3 months ago.
I created a CSS keyframes animation with 5 frames where the background image would fade and change to the next image. The animation works like its supposed to in all cycles except during the first cycle where it glitches before each transition. How to fix this?
HTML:
<div class="container"></div>
CSS:
#keyframes animation1 {
0%, 15%{background-image: url("https://i.imgur.com/IzY1cRC.jpeg");}
20%, 35%{background-image: url("https://i.imgur.com/Bq4PJjC.jpeg");}
40%, 55%{background-image: url("https://i.imgur.com/43idGF1.jpg");}
60%, 75%{background-image: url("https://i.imgur.com/OMa9YYH.jpg");}
80%, 95%{background-image: url("https://i.imgur.com/CTLFd8t.jpg");}
100%{background-image: url("https://i.imgur.com/IzY1cRC.jpeg");}
}
.container{
height: 300px;
width: 550px;
background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
animation-name: animation1;
animation-duration: 25s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Extremely grateful for any help this has been hindering a couple of projects for a good time.
The first time the animation plays, images will not be loaded yet, the browser will fetch only when they're actually needed.
While the image is loading, the default background will be displayed (in this case, transparent, which will ultimately show the white background of the body)
You can 'pre-load' the images. So the browser already had the image data in cache when it's needed for the animation. There's different techniques for pre-loading. A straightforward way is to add an invisible element that requires all the images used in the animation.
In the example below, we add an 'invisible' :after element that loads all images.
.container::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(https://i.imgur.com/IzY1cRC.jpeg) url(https://i.imgur.com/Bq4PJjC.jpeg) url(https://i.imgur.com/43idGF1.jpg) url(https://i.imgur.com/OMa9YYH.jpg) url(https://i.imgur.com/CTLFd8t.jpg) url(https://i.imgur.com/IzY1cRC.jpeg);
}
#keyframes animation1 {
0%,
15% {
background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
}
20%,
35% {
background-image: url("https://i.imgur.com/Bq4PJjC.jpeg");
}
40%,
55% {
background-image: url("https://i.imgur.com/43idGF1.jpg");
}
60%,
75% {
background-image: url("https://i.imgur.com/OMa9YYH.jpg");
}
80%,
95% {
background-image: url("https://i.imgur.com/CTLFd8t.jpg");
}
100% {
background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
}
}
.container {
height: 300px;
width: 550px;
background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
animation-name: animation1;
animation-duration: 25s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
<div class="container"></div>
I was wondering why my background image is not repeating when I have background repeat set to repeat. I am using bootstrap, that is why there is a col-lg-6 there. I am a new to coding and I wanted to test my skills by making an exact copy of another website. This is the website. If you go to that, you can see exactly want I want.
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
One way of thinking of this is that there is a continuous scroll upwards on the image div, and then we rotate that div 15%.
First therefore we need to get a continuous scroll. This can be achieved by putting both a before and after pseudo element on the image div which have the required background. These then both get animated upwards, one starting at top: 0 one starting at top: 100%. That way the scroll is continuous - the after pseudo element follows up immediately after the before one.
So far so good, but when we rotate the image div, there are gaps where the parent div shows through. So we make the before and after pseudo elements twice the size in both directions, get their background images repeated and adjust their positions so they always cover the parent div. The parent is also given overflow: hidden so we don't see the extra bits.
Here is a working snippet. Note that the choice of having the background images 30% of width is arbitrary - change it to what you want.
Note also that the website that is to be copied has a bug, though minor. Every so often you see a slight jerk in the scrolling. We have overcome that problem here by having the two sets of background animate independently so as the second one gets to the top, the first takes on opacity 0 for a split second as it repositions itself back to the top. This fools us into thinking it's all continuous. That website has also put a 'sloping' white over part of the div but that was not part of the question asked here.
.container {
}
.image-div {
position: relative;
overflow: hidden;
}
#image {
position: absolute;
transform: rotate(-15deg) translateX(-25%) translateY(-25%);
height: 200%;
width: 200%;
overflow: hidden;
}
#image::before, #image::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-size: 30% auto;
background-image:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
z-index: 1;
}
#image::after {
top:100%;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
99.95% {
transform: translateY(-100%);
opacity: 1;
}
100% {
transform: translate(0, 0);
opacity: 0;
}
}
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="image"></div>
</div>
Try below code. Let me know if you succeed.
<style>
.image-div {
overflow: hidden;
}
#float {
height: 100%;
width: 100%;
background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
background-repeat: repeat;
-webkit-animation: moving-img 7s infinite linear;
animation: moving-img 7s infinite linear;
}
#keyframes moving-img {
0% {
transform: translate(0px, 0px) rotate(-15deg) scale(1);
}
100% {
transform: translate(-400px, -600px) rotate(-15deg) scale(1);
}
}
</style>
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
<div id="float"></div>
</div>
I'm working on a simple CSS animation and came across a curious problem.
When animating several small divs, if I zoom in or out on Chrome/Firefox the heights of the divs becomes inconsistent - despite them all sharing the same size styles.
Is there any way to address this using CSS? I want the bars to maintain a consistent height without regard to the zoom level. I realize this is something of an edge case, but want to cover as many bases as possible!
Example is here.
HTML
<div class='animation-box animate'>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
</div>
CSS
.animation-box {
width: 100px;
}
.animation-bar {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: bargraph;
animation-timing-function: linear;
background-color: #0d97c1;
height: 3px;
margin: 2px;
}
#keyframes bargraph {
0% {
width: 100%;
}
50% {
width: 10%;
}
100% {
width: 100%;
}
}
What about a simplification with only one element and less of code:
.animation-bar {
animation: bargraph 1.5s infinite linear alternate;
width: 100px;
height: 25px;
background-image: linear-gradient(#0d97c1 50%, transparent 50%);
background-position:0 0;
background-size: 100% 5px;
background-repeat: repeat-y;
}
#keyframes bargraph {
0% {
background-size: 100% 5px;
}
100% {
background-size: 10% 5px;
}
}
<div class="animation-bar"></div>
This is a problem of subpixel rendering. The issue here is that when you are zooming, the space between two bars will have to snap to a given pixel on your screen.
If you have a 3px margin # 150% zoom, the computed space is 4,5px. Meaning that the zoomed space on screen will be inconsistently rendered at 4 or 5px.
On a regular CPU computed dom, your bar will be placed at the closest value, producing those weird gaps.
What you could do to minimize the effect is applying some GPU rendered CSS (opposed to the regular CPU rendering) which is way better at rendering subpixel graphics.
One way of doing that is applying transforms.
.animation-box {
width: 55px;
margin: 0 15px 0 -5px;
}
.animation-bar {
animation: bargraph 1s infinite linear;
transform-origin: top left;
height: 3px;
background-color: #0d97c1;
margin-bottom: 3px;
}
#keyframes bargraph {
0% {
transform: scaleX(1);
}
25% {
transform: scaleX(.8);
}
50% {
transform: scaleX(.6);
}
75% {
transform: scaleX(.8);
}
100% {
transform: scaleX(1);
}
}
<div class='animation-box animate'>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
<div class="animation-bar"></div>
</div>
I recommend an excellent article on Smashing Magazine on that topic : CSS GPU Animation: Doing It Right
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 6 years ago.
I'm working on a website with animated elements using CSS3. One problem I have is the vertical scrolling bar. So there's an element that is constantly sliding from left to right and back:
#keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
So that this works, the object is bigger than the screen size. Now of course the vertical scrolling bar appears. How can I hide that?
I put the element in a container, where I defined overflow-x: hidden but somehow it didn't work. Maybe I just did a mistake? What method should I use?
Here's the fiddle:
https://jsfiddle.net/hsdoy3t4/
Thank you very much for your help.
Because it's taking default margin of body tag.
Set margin:0 for body tag.
body{
margin:0;
}
#home {
width: 100vw;
overflow-x: hidden;
}
#object {
background-image: url('http://www.1000skies.com/800trim.jpg');
width: calc(100% + 50px);
height: 158px;
position: relative;
-webkit-animation: waves 2s infinite;
-moz-animation: waves 2s infinite;
animation: waves 2s infinite;
}
#-webkit-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
#-moz-keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
#keyframes waves {
0% {left:-50px;}
50% {left: 0px;}
100% {left: -50px;}
}
<section id="home">
<div id="object"></div>
</section>
I am trying to create a ken-burns like effect for image panning - and have seen multiple examples of how to do so. but my resultant code is not working on iOS and is choppy on windows larger screens.
I am using background position - and would like to use transfrom instead - which seems to work better on iOS browsers.
#-webkit-keyframes pan {
0% { background-position: 0% 0%; }
25% { background-position: 100% 100%; }
50% { background-position: 100% 0%; }
75% { background-position: 100% 100%; }
100% { background-position: 0 0; }
}
#keyframes pan {
0% { background-position: 0% 0%; }
25% { background-position: 100% 100%; }
50% { background-position: 100% 0%; }
75% { background-position: 100% 100%; }
100% { background-position: 0 0; }
}
.back {
background: url(big.png) no-repeat;
-webkit-animation: pan 80s ease-in 1s infinite;
animation: pan 80s ease-in 1s infinite;
}
The above works in general browser but is choppy. I have tried to increase the intervals etc. - but it also does not quite work on iOS.
how would I convert the above code to use transform or translate css-property instead ? I understand it is better/faster for performance and smoothness.
thanks