I am using -webkit-animation on a div like the following:
#agFloor {
background-image: url('http://blabla/something.jpg');
width: 375px;
height: 364px;
top:0;
left:20px;
-webkit-animation: FloorAnim 5s ease-in-out;
}
with the keyframe;
#-webkit-keyframes FloorAnim {
0% { -webkit-transform: translateY(100%); }
40% { -webkit-transform: translateY(-60%); }
80% { -webkit-transform: translateY(-60%); }
100% { -webkit-transform: translateY(0%); }
}
My question is that as far as I understand this should be a one time animation, but when I fadeOut/hide and fadeIn/show the div with jQuery is like is adding the rule each time so the animation is done each time the div is shown or fadedIn.
Is this a WAD or some kind of bug?, is there anyway to avoid this behaviour?.
I would like to have the animation only once and then play with the div without triggering the animation each time.
Tks.
When you do the hiding, set -webkit-animation to none via .css
$(this).css("-webkit-animation", "none");
http://jsfiddle.net/BHF8m/
Related
I want to move a div and while it's moving I want to increase its opacity then decrease it. With css keyframes I'd do something like this:
.animated-element {
animation: move-and-fade 5s ease-in-out infinite;
}
#keyframes move-and-fade {
0% {
transform: translateY(0px);
opacity: 10%;
}
50% {
opacity: 100%;
}
100% {
transform: translateY(620px);
opacity: 10%;
}
}
Is this possible natively with Webflow interaction? It seems I can only add actions with previous action or after.
I want to achieve something similar to this, where the small lines are moving on the border of the hero image.
Here's an example of my implementation in Webflow.
I'm doing some CSS animations inside a modal dialog. Here's the pertinent SCSS:
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
#keyframes shrink {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
$duration: 0.5s;
$animationFillMode: both;
&:not(.active):hover, &.active {
img {
animation: grow $duration $animationFillMode;
}
}
&:not(.active) {
img {
animation: shrink $duration $animationFillMode;
}
}
This works well but the problem is, when I open the modal, the animations kick in immediately. For example, because when the modal is first open I'm not hovering on one of the elements, the element instantly shrinks from big to small. I want the element to start in the small state when the modal is open.
Is is possible? TIA
Yes it is, use reverse tag.
Example: animation-direction: reverse;
I have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)
I'm sure it's a simple answer, but I'm trying to figure out how to hide the animation below: until it enters the div.
.slideInDown {
-webkit-animation-name: slideInDown;
-moz-animation-name: slideInDown;
-o-animation-name: slideInDown;
animation-name: slideInDown;
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
I want the final to look similar to the first animation in the center of this page: www.laracasey.com.
Thanks!
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
To do this, you must specify two things:
Specify the CSS property you want to add an effect to and Specify the duration of the effect.
For example:
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
Try it yourself. You can see more in W3schools
Or if you want to use JQuery. Here is an example :
$("div").hover(function() {
$(this).addClass("slideInDown");
});
In your case :
I create the div the simulate your situation:
div
{
width:100px;
height:100px;
background:red;
}
Simply declare the class and animation name :
.sideInDown{
animation:slideInLeft 5s;
-webkit-animation:slideInLeft 5s; /* Safari and Chrome */
}
Create the keyframs :
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
Finally, use the JQuery to add a class when a mouseover event happens:
$("div").hover(function() {
$(this).addClass("sideInDown");
});
You can see how it acts from my demo
you mean something like this one?
http://fiddle.jshell.net/sijav/PjEb5/
you need to place your thing to animate in the div and make the overflow of that div as overflow:hidden
hope it helps
I'm currently trying to create an animation that would make a div look as it if sinks backwards, then (after finished falling back) gets pushed to the left.
I'm using CSS3 right now, but I'm not super familiar with the animation property and am having some problems. Currently I'm using:
#-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
margin-left: -100px;
}
}
The result of this though is that it scales down, then after 50%, starts scaling back up while getting pushed left. I want it though to stay at scale(.9) while being pushed left.
I'd also be willing to do this with jQuery, but animate doesn't support transform, and I don't want to use one of the plugins that enables those animations. So CSS3 felt like it would be a better option.
EDIT
Thanks to gion for his help. Final code below (switched out margin-left):
#-webkit-keyframes sinkBack /* Safari and Chrome */
{
50% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: translateX(-100px) scale(.9);
}
}
keep the scale :
#-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
-webkit-transform: scale(.9);
margin-left: -100px;
}
}