I'm using this code to make a wordpress header picture slowly zoom in and out. It works in Chrome and Firefox, but in Safari it seems like the background-size: cover that is set for the picture overrides the zoom. Is there a way to zoom from cover to "150% cover"? Basically tell it to start as cover and then go 150% from there? This code wont even zoom at all in Safari, and background-size: 100% doesn't make the picture tall enough on mobile so I'd need a different solution.
Thank you!
#-webkit-keyframes animatedBackground {
from {
background-size: 100%;}
50% {
background-size: 150%; }
to {
background-size: 100%; }
}
.home .header-media .wrapper:before {
-webkit-animation: animatedBackground 90s linear infinite;
-moz-animation: animatedBackground 90s linear infinite;
animation: animatedBackground 90s linear infinite;
background-position: center;
background-size: cover;
}
Here is working snippet, transition and background-size do the trick.
.parent {
width: 400px;
height: 300px;
}
.child {
transition: all .5s;
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg");
background-position: center;
background-size: 100%;
}
.parent:hover .child,
.parent:focus .child {
background-size: 150%;
}
<div class="parent">
<div class="child"></div>
</div>
Related
for some reason are the image gone when the animation is finished? :/
.coin {
width: 200px;
height: 200px;
background-size: cover;
animation: CoinflipRoll 6s steps(199);
animation-delay: .5s;
animation-fill-mode: forwards;
background-repeat: no-repeat;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
}
#keyframes CoinflipRoll {
100% {
background-position-y: -39800px;
}
}
<small>Image is 248x12648</small>
<div class="coin"></div>
Correct your code like below. You don't need a lot of complex value and you need to set the correct value to steps(). Your image contains 50 frames not 199
.coin {
width: 200px;
height: 200px;
animation: CoinflipRoll 2s steps(50) .5s forwards;
background-image: url("https://i.imgur.com/Mvek2Uy.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
#keyframes CoinflipRoll {
100% {
background-position: bottom;
}
}
<div class="coin"></div>
The animation is moving the picture out of the frame. Look at the picture - its still there afterwards, just moved through all the "animation frames". So stop it before it is at the end but manipulating the end value
I want to create a shine loading animation which will appear on multiple elements with different background colors.
Currently, I'm using background-image gradient and I'm animating the background-position using vw units, but it's not scalable, my elements will have different lengths.
Is there a way I can animate background-image with percentage units?
The animation created
body {
background: black;
}
header {
width: 100%;
height: 50px;
background-color: rebeccapurple;
background-image: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.3) 50%,
transparent 100%
);
background-repeat: no-repeat;
background-position: -100vw;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: -100vw;
}
100% {
background-position: 100vw;
}
}
<header></header>
An idea is to make the size of the gradient to be 3 times bigger than the container and color the middle part of it then you slide it from left to right:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
linear-gradient(90deg,#0000 33%,rgba(255,255,255,0.3) 50%,#0000 66%)
rebeccapurple;
background-size:300% 100%;
animation: shine 2s infinite;
}
#keyframes shine {
0% {
background-position: right;
}
/*100% {
background-position: left; it's the default value, no need to define it
}*/
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Another alternative for a different animation:
body {
background: black;
}
.box {
height: 50px;
margin:5px;
background:
repeating-linear-gradient(90deg,#0000 0,rgba(255,255,255,0.3) 25%,#0000 50%)
rebeccapurple;
background-size:200% 100%;
animation: shine 1s infinite linear;
}
#keyframes shine {
0% {
background-position: right;
}
}
<div class="box"></div>
<div class="box" style="width:60%"></div>
<div class="box" style="width:40%"></div>
Related question: Using percentage values with background-position on a linear-gradient
The background image isn't smooth when it comes to animate it (some kind of blink) and I can't make it zoom from the image center.
This is for my personnal website I'm trying to make.
*{margin: 0;padding: 0;}
body
{
background-color: #0C090A;
background-image: url(../abstract-bg.png);
animation: zoom 30s infinite;
-webkit-animation: zoom 30s infinite;
}
#keyframes zoom {
0% {
background-size: 100%;
}
50% {
background-size: 105%;
}
100% {
background-size: 100%;
}
}
I would like to get the background image (which is 1920*1080) zoom slowly to 105% of it's original size (or something like that), and then go back to 100%. Also, if it's possible, make it zoom from the center, and not the top left corner. Thanks for those who can help.
yes of course you can :)
just add
background-position:center center;
background-repeat:no-repeat;
in the body css
and add
html{
height: 100%;
}
full css code:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-color: #0C090A;
background-image: url(https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg);
animation: zoom 30s infinite;
-webkit-animation: zoom 30s infinite;
background-position: center center;
background-repeat: no-repeat;
}
#keyframes zoom {
0% {
background-size: 100%;
}
50% {
background-size: 150%;
}
100% {
background-size: 100%;
}
}
you can test the code:
https://playcode.io/358401
It's choppy because the animation duration is too long for 5% of the width of the image. either increase the size or decrease the duration of the animation or use a bigger image.
Or you can use scale() which make use of the GPU i believe, However this time we won't be using the image as a background.
body{
overflow-x:hidden;
}
img {
transform-origin: center center;
animation: zoom 30s infinite;
max-width: 100%;
}
#keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
/* equals 105% */
}
100% {
transform: scale(1);
}
}
<img src="https://picsum.photos/id/238/1920/1080">
The problem is on iPhones, on android mobiles it code works well. On Safari the background picture is zoomed, you can see this on the picture below:
Display on Safari:
Safari-view
Display on Android(properly):
Android-view
What can I improve with that code?
HTML:
<div id="background">
<h2>Lorem ipsum</h2>
<hr />
<h3>Dolor sit amet</h5>
</div>
CSS:
#background{
height: 92.5vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: mymove 16s infinite;
animation: mymove 16s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-image: url("gallery/DSC03389n.JPG");
}
#keyframes mymove {
0%{background-image: url("gallery/DSC03389n.JPG");}
46%{background-image: url("gallery/DSC03389n.JPG");}
54%{background-image: url("gallery/DSC03385n.JPG");}
100%{background-image: url("gallery/DSC03385n.JPG");}
from { background-position: 17% 0; }
to { background-position: 70% 0; }
}
#media screen and (max-width: 600px) {
#background{
background-image: url("gallery/DSC03389m.JPG");
}
#keyframes mymove {
0%{background-image: url("gallery/DSC03389m.JPG");}
46%{background-image: url("gallery/DSC03389m.JPG");}
54%{background-image: url("gallery/DSC03385m.JPG");}
100%{background-image: url("gallery/DSC03385m.JPG");}
from { background-position: 17% 0; }
to { background-position: 74% 0; }
}
}
The issue is with background-attachment: fixed; and has been around for a really long time and is super frustrating since cover and fixed are incredibly common CSS background parameters.
The solution here is to nix the fixed on Safari.
What we did was add a device and browser class to our body with PHP, and set its own CSS declaration
.ipad #background,
.safari #background {
background-attachment: scroll;
}
I want a background image to exapand and then contract on hover.
a:hover{
background-size: 80%;
}
a:hover{
background-size: 85%;
transition: background-size 0.05s ease;
//This is where I want the size to shrink back to it's original size.
}
I know there is a delay-property, but is it possible to add multiple transitions with different delays etc?
One solution I came up with is to add an additional property
a.workaround:hover{
background-size: 80%;
transition-delay: 0.05s;
}
However this seems like a fairly messy solution. For example it doesn't support loops and it scales poorly.
You could instead define a CSS-Animation
See this jsFiddle for a demo: http://jsfiddle.net/qDppZ/
(Only -moz for clearness)
Code:
a {
display: inline-block;
background: url(http://openclipart.org/image/800px/svg_to_png/95329/green_button.png) no-repeat;
background-size: 80%;
width: 100px;
height: 60px;
}
a:hover {
-moz-animation: anim 0.2s; /* Firefox */
}
#-moz-keyframes anim /* Firefox */
{
0% { background-size: 80%;}
50% { background-size: 85%;}
100% { background-size: 80%;}
}