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%;}
}
Related
I have an image of a butterfly, something like this.
I am trying to figure out if there is any way to make it look like its wings are opening and closing with a 3D CSS transform/translate or animation, but without having to split the image up into parts (it can be a background image of a div though if that helps).
Yes, using background applied to two elements where each one will show only one half and then you simply rotate both on the Y axis.
.box {
width:300px;
margin:20px;
display:flex;
perspective:500px;
}
.box::before,
.box::after{
content:"";
padding-top:56%; /* ratio based on your image */
flex:1; /* half the main element size */
background-image:url(https://i.imgur.com/DgMoHC5.jpg);
background-size:200% 100%; /* twice bigger than the pseudo element to get half the image*/
animation:left 1s linear infinite alternate;
transform-origin:right;
}
.box::after {
background-position:right; /* get the right part of the image */
animation-name:right;
transform-origin:left;
}
#keyframes left{
to {transform:rotateY(60deg)}
}
#keyframes right{
to {transform:rotateY(-60deg)}
}
<div class="box"></div>
A more realistic animation with some translation:
.box {
width: 300px;
margin: 20px;
display: flex;
perspective: 500px;
}
.box::before,
.box::after {
content: "";
padding-top: 56%;
flex: 1;
background-image: url(https://i.imgur.com/DgMoHC5.jpg);
background-size: 200% 100%;
animation: left 0.5s linear infinite alternate;
transform-origin: right;
}
.box::after {
background-position: right;
animation-name: right;
transform-origin: left;
}
#keyframes left {
from {
transform: translateZ(80px) rotateY(-30deg)
}
to {
transform:translateZ(0px) rotateY(50deg)
}
}
#keyframes right {
from {
transform: translateZ(80px) rotateY(30deg)
}
to {
transform:translateZ(0px) rotateY(-50deg)
}
}
<div class="box"></div>
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>
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I am trying to use a CSS animation to create a preloader animation for my gallery. When I am applying the CSS code below it looks ok in Chrome, Firefox, but it doesn't look nice in Internet Explorer and Safari. For your reference here is the original picture - for a demo see this fiddle.
I dug through most articles related to this topic and applied the fixes that seem to make sense (see comments in code), but alas it still looks like crap.
Do any of you CSS wizards have an solution for this issue?
div.preloader-container {
background-image: url('img/preloader.png') no-repeat !important;
background-size: 20px 20px !important;
height: 20px !important;
width: 20px !important;
position: relative !important;
top: 50% !important;
display: block;
margin-left: auto;
margin-right: auto;
/* Attempt to fix it 1 */
-webkit-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Attempt to fix it 2 */
outline: 1px solid transparent !important;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate(360deg);
}
}
#keyframes spin { 100% {
transform:rotate(360deg);
}
}
Ok my in very specific instance the problem was that re-sizing a 200px image to 20px was handled badly by these browser. As soon as I decreased the size of the png to 40px and resize to 20px with the backgroud-size attribute it works like a charm. Hope that helps other people with the same issue.
Here is a demo fiddle with the solved issue and here is one with the issue still happening.
background-size: 20px 20px;
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...