I'm using webkit keyframes to animate some rectangles. From everything I can see, the animation should be operating correctly. I'm using the forwards modifier to retain animation changes and all of my syntax is correct (see my CSS below). However, every time I execute, the animation seems to drop each of the animation changes as they occur.
So for example, say I modify the width of the rectangle at 0% and then rotate the rectangle at 25%. As it is rotating, the width will return to its original setting. I'm really not sure what's happening here. Am I missing a fundamental aspect to keyframes?
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5);}
100% {transform: rotate(-45deg);}
}
every step is override the previous step property transform, what you can do is to append to this property the previous changes, like this:
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
background-color: black;
width: 100px;
height: 100px;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: translate(0px, 15px) scaleX(0.5);}
100% {transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);}
}
<div class='navbar-toggler'>
<div class='icon-bar'>
<div></div>
</div>
</div>
This is because of how the transform property works. Every time you are setting transform in your keyframes you are overwriting the previous value.
What you want is something like this:
#-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5) translate(0px, 15px) ;}
100% {transform: rotate(-45deg) scaleX(0.5) translate(0px, 15px);}
}
Note how I am keeping the previous transforms present in the value and adding the new change to the front of of the list.
The the individual transforms evaluate from right to left.
All the stages of the animation are transform settings – if a new one is triggered, it replaces the previous one (the previous parameters are animated back to their default values). To avoid that, leave the previous values/parameters in the new transform setting and add the new parameter/setting as shown below:
.test {
width: 100px;
height: 60px;
background: #fa0;
-webkit-animation: close-top 5s forwards;
}
#-webkit-keyframes close-top {
0% {
transform: translate(0px, 5px);
}
33% {
transform: translate(0px, 15px);
}
66% {
transform: translate(0px, 15px) scaleX(0.5);
}
100% {
transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);
}
}
<div class="test">TEST</div>
Related
Here's the demo: http://codepen.io/anon/pen/WGLGyY
the DIV doesn't rotate when the keyframe is:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: scale(2, 2) rotate(180deg) translate(200px,200px)
}
}
when I change the keyframe to:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: rotate(360deg) scale(2, 2) translate(200px,200px)
}
}
It rotate again.
So what's the reason here?
I know the order may affect the transform.
Maybe because rotate(360deg) equals rotate(0); But when I change the order of transform it comes back again....
Use transform: none for your first keyframe, and it will rotate.
Here it is in action:
#keyframes test1{
0% {
transform: none;
}
100% {
transform: scale(2, 2) rotate(360deg) translate(200px,200px)
}
}
#test{
width:200px;
height: 200px;
background: red;
animation: test1 3s infinite
}
<div id="test"></div>
#keyframes my-animation {
0% {
transform: translate(0, 40%) scale(0);
}
10% {
transform: scale(1.1);
}
20% {
transform: scale(1);
}
100% {
transform: translateY(0%);
}
}
I'm trying to make my element pop then move on the Y axis, but the above fails to work.
Where am I going wrong?
Transform property gets overridden during your animation. So even though the keyframe at 0% says translate by 40% in Y-axis, the second frame at 10% nullifies it. There is a movement between 0% and 10% but that is almost invisible because the element is just then coming into view.
You need to retain the translate(0, 40%) till the time the element needs to remain translated by 40% in the Y-axis. In the below snippet, I have retained it at the translated position till 20% of the animation duration and then from between 20% to 100% it goes back to the original position.
#keyframes my-animation {
0% {
transform: translate(0, 40%) scale(0);
}
10% {
transform: translate(0, 40%) scale(1.1);
}
20% {
transform: translate(0, 40%) scale(1);
}
100% {
transform: translateY(0%);
}
}
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: my-animation 4s linear forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some</div>
I'm trying to grow a circular image on hover, but can't get this code to work.
I can get the circle to grow using the CSS transform but it grows immediately and is a bit ugly. Ideally I'd want there to be a 2-3000ms delay with linear growth both on hover and mouse out.
I know I can do this with JS/D3 but need to do it with CSS if possible.
Have tried
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
width:250px;}
25%
{
width:260px;}
75%
{
width:270px;}
100%
{
width:280px;
}
}
and
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
25%
{
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);}
75%
{
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);}
100%
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
But neither are working.
Is there a better way to do this?
I've created a pen based on your code
Using transform: scale is a better method since it increases both width and height.
The key thing you missed out on for creating a smooth animation is the transition attribute, this needs to be applied to the element in it's normal state not it's :hover state.
I've added this transition styling:
transition: 3s ease-in-out;
Note that it's the same length as your animation timing. ease-in-out is a standard easing function, if you'd like to get more in-depth try playing around with cubic-bezier
Animation delay can be added easily with this attribute:
animation-delay:2s
Another thing which makes keyframe animations smoother is having the 0% and 100% stylings the same, so in this example the circle returns to the original scale by the time it reaches 100% which creates a nice, smooth, repeatable animation.
I've also created an alternative animation which looks even smoother, this is done by simply setting scale for the 0% and 100% points in the animation:
0%{transform: scale(1)}
100%{transform: scale(2)}
Another thing you can do is change your animation loop setting from normal to infinite alternate, checkout my second example this is using infinite alternate which makes the circle grow and shrink with no sudden snaps.
You can delay the start of an animation with animation-delay
Such as
.delay {
animation-delay:2s
}
Reference # MDN
Demo showing the difference below
.circle {
border-radius: 50%;
display: block;
}
.circle:hover {
animation: mymove 3s normal;
}
.delay:hover {
animation-delay: 2s
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
}
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>
You can delay the start of the transition by using the transition-delay property.
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
W3Schools
So I have this cute little spinner made to signify when something is loading. The perspective changes and the background color are supposed to change at the same time. I am having trouble getting the Transform and Transition timings to line up so that you don't see the color change, it needs to be already changed when the square flips so that it is a smooth transition.
Link to JS Fiddle
HTML
<div class="spinner"></div>
CSS
.spinner {
width: 20px;
height: 20px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
#keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
Two things to consider:
Transitions interpolate smoothly (well, according to the easing function) between keyframes.
If you do not specify an attribute at a keyframe, it will interpolate without interruption over that keyframe.
With those in mind, you can change the keyframes to apply your color change in the middle of your perspective change. In addition, you'll set two keyframes for the color change, very close to each other, to ensure the interpolation happens over a small time slice.
#-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
24.9% {background-color: #00b16a;}
25.0% {background-color: #f22613;}
50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
74.9% { background-color: #f22613; }
75% { background-color: #aaabae; }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
Now, you'll notice that since you have the animation on infinite repeat, that you still get a color transition when the animation loops from 100% to 0%. You'll have to either specify animation-direction: alternate; or adjust your keyframes so that 100% ends at a reasonable tweening point between 100% and 0%.
DEMO using alternate
I'm trying to make multiple transitions on a hover state.
http://cssdesk.com/VbVTX
I want the image to first rotate to the left by 20deg, then back to the start, and then to the right by 20deg.
I've tried:
-webkit-transform: rotate(20deg, -20deg);
and
-webkit-transform: rotate(20deg);
-webkit-transform: rotate(-20deg);
Would I be best to use a before/after?
Thanks in advance
CSS3 Keyframe animation would be better suited to make this effect, they allow you to define several states and animate between these states.
The following demo rotates the image left 20 degrees, then back to normal state, pause and rotate 20 degrees left. The animation is launched on hover.
DEMO
.whatWeDo img {
margin:9% 0;
height: 102px;
width: 100px;
}
.whatWeDo img:hover {
-webkit-animation: rotation 4s;
animation: rotation 4s;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
#-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-20deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(20deg);}
}
#-keyframes rotation {
0% { transform: rotate(0deg);}
25% { transform: rotate(-20deg);}
50% { transform: rotate(0deg);}
75% { transform: rotate(0deg);}
100% { transform: rotate(20deg);}
}