Animate a background image ease-in-out in CSS? - css

I am trying to make a background image smoothly fade in when the class is added and fade out when the class is removed (to a div).
My current CSS (tested in Firefox only)
background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
But what that does is show the image fade in and move to the center from the left. I want it to already be in position when the fading in happens. How?


Hard to tell without seeing your class and javascript but, from my experience with css3 transitions and animations - all of the elements in the class with the transition/animation on it are taken into effect. So you will want to have two classes to seperate the static css properties from the animating ones. Put these properties on another class for that div which is always present:
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
Then just toggle the class which has the animation properties:
background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
So when you change the class you have say "defaultClass" class to start and then change it to "default animationClass" for toggling the animation/transition. Hope that helps?


Try this link with this answer. Also check out this answer, cause it may well be possible to do this with jquery.
If not, last resort may be to just position an image with z-index below all your other layers and then animate it as a regular DOM element.


maybe the question is closed, but i'll try to post my answer
this code should work, just use your own bg.jpg
<html>
<head>
<title>some title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-o-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
/*backface-visibility: hidden;*/ //ORIGIN
backface-visibility: visible;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this */
background: #348cb2 url("images/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}
#-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-o-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#bg {
background-size: 2250px auto;
width: 6750px;
}</style>
</head>
<body>
<div id="bg"></div>
</body></html>

Related

css animate elements left to right with pause in between

I have a row of four icons I want to animate from right to left but I want the animation to pause at some point so the each icon will be visible one after the other in a circled mask.
I just can't figure how to pause in a middle of a keyframe. I want to know if it's possible and if it's possible without any Javascript
Thanks a lot
here is what I have now:
#keyframes move {
0% {
opacity: 0;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
25% {
opacity: 1;
}
50% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
75% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.icons {
-webkit-animation: move 4s ease-in 2;
-moz-animation: move 4s ease-in 2;
animation: move 4s ease-in 2;
}
100% {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
thanks in advance for your help

If you could provide your HTML and clarify a little more it may be easier to understand exactly what it is you're trying to achieve.
But if you're looking to just stagger your icons you can use :nth-child pseudo selector to put a unique delay on the different icons, and then adjust your animation %'s to keep the icons positioned for your desired time.
.icons:nth-child(2) {
animation-delay: 1s;
}
.icons:nth-child(3) {
animation-delay: 2s;
}
.icons:last-child {
animation-delay: 3s;
}
Here is a working example of staggering your animation using nth-child.

IE10 No Webkit not working

I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out

Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}

You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.

Is there a pure css way to stop animation on hover?

Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.
HTML
<div class="box">
<img src="imagename.png" />
</div>
CSS
a {display: block;}
.animate {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
20% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover,
.bounce:focus {
-webkit-animation-name: bounce;
animation-name: bounce;
}
I've attached a jsfiddle of the result I'm getting.
http://jsfiddle.net/jordan911z/M3vZ2/

The animation-play-state property can pause or resume an animation. It accepts either:
running — the default; an animation plays as normal
paused — the animation is paused
#myelement:hover, #myelement:focus {
animation-play-state: paused;
}
See full tutorial on SitePoint.

Try add this to your CSS
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */

gif animation set up once running only once

I have one png image and another gif image. And the gif image is made from photoshop with setting for once.
Now when I hover the button then background-image is changed with the gif image but if again hovered then it will change the background image to gif file but not animating.
Is there any solution for this?
demo

Displaying a .gif on hover isn't really the best way to go about this, due to compatibility with other browsers. Maybe you could consider using CSS animations? Here's a cool library made up of some CSS keyframe animations.
http://daneden.github.io/animate.css/
The flipOutX animation might be a close match to what you want.

JsFiddle
Think this is what you wanted:
HTML:
<div id="btn">demo</div>
CSS:
#btn {
background: blue;
width: 200px;
height: 55px;
color:#fff;
border-radius:200px;
position: absolute;
text-align:center;
line-height:55px;
top: 19px;
right: 107px;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#btn:hover {
-webkit-animation-name: tilt;
animation-name: tilt;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
}
#-webkit-keyframes tilt {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(45deg);
transform: perspective(400px) rotateX(45deg);
}
}
#keyframes tilt {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(45deg);
-ms-transform: perspective(400px) rotateX(45deg);
transform: perspective(400px) rotateX(45deg);
}
}

How can I scale and rotate a rounded search btn?

I have rounded submit btn, that I want to scale to 80% from the start and when I hover it I want it to scale to 100% and also rotate 360 degrees. Here's the code, I haven't have any luck finding any answers on the web.
header #searchbtn{
background: url(../img/roundedsearchbtn.png) no-repeat;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
height: 41px;
filter: alpha(opacity=60);
opacity: 0.60;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
overflow: hidden;
text-indent: 100%;
width: 41px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-transform: scale(0.8);
}
header #searchbtn:hover, header #searchbtn:focus {
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-ms-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
-transform: rotate(360deg) scale(1);
}

This is what you want? Fiddle
Just add these CSS rules:
button {
-webkit-transform: rotate(0) scale(.8,.8);
-moz-transform: rotate(0) scale(.8,.8);
transform: rotate(0) scale(.8,.8);
}
button:hover {
-webkit-transform: rotate(360deg) scale(1,1);
-moz-transform: rotate(360deg) scale(1,1);
transform: rotate(360deg) scale(1,1);
}

Resources