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;
}
}
Related
I have this little modal that slides-in from the top of the page upon entering, and slides back out again when clicking on it.
My problem is that I don't want it to leave the page completely after clicking. I need to keep the bottom 32px of the modal showing at the top of the screen, so that the user can click it again, and it will slide back down. Furthermore, the modal itself is dynamic and changes height depending on the information passed into it.
My keyframes are these:
#keyframes slide-bottom {
0% {
top: -100%;
}
100% {
top: 50%;
transform: translateY(-50%);
}
}
#keyframes slide-top {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: -100%;
transform: translateY(32px);
}
}
Thanks in advance!
The issue is with the 100% declarations, for slide-top.
100% {
top : calc(-50% + 32px);
transform : translateY(0%);
}
might fix the issue
I have a simple GIF image that I am applying a keyframe animation to (to make it spin infinitely), and for some reason, if I hover over links elsewhere on the page, they randomly jump up or down by a pixel or two.
When I remove the DOM element that has the animation on it (the image) the jumping does not occur, leading me to believe it is somehow caused by the CSS animation somehow. This ONLY happens in Chrome, even the most recent update of Chrome.
I have read all other related questions on here and nothing has resolved it yet, it is NOT the -webkit-backface-visibility fix needed here.
Example CSS:
#mixin spin {
-webkit-animation: spin360 1.26s infinite linear;
animation: spin360 1.26s infinite linear;
}
#-webkit-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animated-image {
position: absolute;
#include spin;
}
Example DOM:
<h3 class="header">
Heading title
</h3>
<div class="animated-image"><img src="../img/loader.gif"></div>
Working example: http://codepen.io/caseytrombley/pen/YWYqRQ
I think the problem is in chrome the img it isn't vertical and horizontal centered.
I suggest you use flexbox to centered and must be fixed
Other way is use the img like background image and put
background-position: center center;
background-size: contain;
but I can imagine it's an animated gif, in that case must be fixed with flex
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 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/
I would like to create an animation in two parts. I explain a bit.
I have a rectangle, at the beggining of the animation, the top will have an animation to be shrink. After this end of this animation, I would like to keep this state, use js to detect when the animation is finished and add my second animation the shrink the bottom of the rectangle. At the moment, there are the two animations, but don't keep in mind the previous state.
#-webkit-keyframes scale {
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
}
#-moz-keyframes scale {
100% {
-moz-transform-origin: 50% 100%;
-moz-transform: perspective(900px) rotateX(10deg);
}
}
.scale {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
-moz-transform-origin: 50% 100%;
-moz-transform: perspective(900px) rotateX(10deg);
}
#-webkit-keyframes toto {
100% {
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-10deg);
}
}
#-moz-keyframes toto {
100% {
-moz-transform-origin: 50% 0%;
-moz-transform: perspective(900px) rotateX(-10deg);
}
}
.scale2 {
background: purple !important;
-webkit-animation: toto 1.4s ease forwards !important;
-moz-animation: toto 1.4s ease forwards !important;
}
A little jsfiddle with the code : http://jsfiddle.net/JeremDsgn/Dfyam/2/
I would recommend that you use a plugin such as jQuery Transit since it is ideal for preserving the state of your css3 transitions/transforms, especially if you are planning on doing a lot of animations. It is a lot easier than maintaining a big CSS file.
Example:
//Initial settings on Window DIV
$('#window').css( { 'transformOrigin': '50% 100%', perspective: '900', rotateX: 10 } );
$('#yoyo').on("click", function () {
$('#window').transition( { background: 'purple' }, 1400, 'in', function () {
//Do any additional animations here, such as change the background again
$('#window').delay(2000).transition( { background: 'blue' }, 3000, 'out');
});
});
JS Fiddle Demo
You can do one of two things:
Add a from or 0% to your second animation:
http://jsfiddle.net/trolleymusic/y2Hxc/
#-webkit-keyframes scale {
100% {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
}
#-webkit-keyframes toto {
from {
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(10deg);
}
to {
-webkit-transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-10deg);
}
}
Or add the current transform properties to the element as inline styles using javascript before adding the second transition - I think this is what you were talking about wanting:
http://jsfiddle.net/trolleymusic/TbwfC/
// Listener
$('window').addEventListener('webkitAnimationEnd', function() {
this.style.webkitTransform = window.getComputedStyle(this)["-webkit-transform"];
this.style.webkitTransformOrigin = window.getComputedStyle(this)["-webkit-transform-origin"];
this.className = 'scale2';
}, false);
So you get the current transform matrix and origin from window.getComputedStyle, and apply it to the element before changing the class name.
I have removed the -moz- prefixed lines to keep the code shorter - as ROFLwTIME pointed out it can get long quickly. Obviously using the second solution you will have to watch how you implement it in other browsers as they will need to read their respective prefixes or the non prefixed versions of transform and transform-origin.
A quick plug for SASS
If you are concerned with the complexity and size of your CSS I would consider looking at SASS (http://sass-lang.com) and Compass (http://compass-style.org), especially for transforms and animation. Instead of writing:
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
transform: rotateX(10deg);
You write:
#include transform(rotateX(10deg));
And SASS will output all of those lines into your CSS. It makes writing animations, transforms and transitions much more manageable.