I have water animation. I want two keyframes to have cubic-bezier(1,.41,.74,.45) and third one to have cubic-bezier(.38,.8,.68,.09). In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there are 3 keyframe loops in animation. Is there a way to specify different cubic-beziers for different keyframes or apply different animations for same elements?
Pure CSS. No additional elements.
This is example for the first part of animation and this is for the second part.
I am not sure what is your requirement.
But about your question
Is there a way to specify different cubic-beziers for different keyframes
Yes, it's possible
#keyframes ripple {
0% {
transform: scale(1);
animation-timing-function: cubic-bezier(.38,.8,.68,.09);
}
50% {
transform: scale(0.27);
animation-timing-function: cubic-bezier(1, .41, .74, .45);
}
100% {
transform: scale(1);
}
}
.wave {
width: 100px;
height: 100px;
border: solid 4px red;
border-radius: 50%;
animation: ripple 2s infinite;
}
<div class="wave"></div>
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 have a little problem in here related with CSS3 animations.
I want to run animation and than run it again reversed. To make this I'm using:
-webkit-animation: moveKv 1s forwards, moveKv 1s forwards 2s reverse;
And that's how my keyframes looks like:
#-webkit-keyframes 'moveKv' {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(180deg); }
}
Everything works fine in Chrome canary, but it don't work in stable chrome. For some reason as soon as I add delay animation stops working.
Here's jsfiddle
EDIT: Okay, let me show you what I want eventually.
http://jsfiddle.net/57dw8/5/
EDIT 2: Actually the reason was pretty simple. Use 2 animations with same name wasn't supported in stable chrome at the moment post was created.
Not the cleanest way, but since your animation is that simple: why not using two animations (one forward, one backward) with the same duration and apply 1T delay to the second one (to start from the end of the first) ?
Running Example
.wrap { position: relative; }
.banner {
position : absolute;
top : 0;
left : 0;
width : 100px;
height : 100px;
background : #000;
border-left : 10px solid red;
border-right : 10px solid green;
border-bottom : 10px solid blue;
border-top : 10px solid yellow;
-webkit-animation : moveForward 1s, 1s moveBackward 1s;
}
#-webkit-keyframes 'moveForward' {
0% { -webkit-transform : rotate(0deg); }
100% { -webkit-transform : rotate(180deg); }
}
#-webkit-keyframes 'moveBackward' {
0% { -webkit-transform : rotate(180deg); }
100% { -webkit-transform : rotate(0deg); }
}
I've prefixed the code in the Fiddle with Nettus Prefixr, so you can run it crossbrowser now.
Here is the answer....
fiddle: http://jsfiddle.net/nikhilvkd/57dw8/3/
.banner {
position: absolute;
top: 0; left: 0;
width: 100px;
height: 100px;
-webkit-animation: moveKv infinite 2000ms;/*change here*/
background: #000;
}
#-webkit-keyframes moveKv {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(0deg); }
}
You should use two properties -
animation-direction: alternate;
animation-iteration-count: 2;
animation-direction - Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
animation-iteration-count - Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
Must read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Consider the following fiddle: http://jsfiddle.net/a7EVf/5/
Is it possible to have the div rotate through (effectively to 360 degrees instead of 0) on hover out instead of moving back counterclockwise?
I would rather NOT use JavaScript (including jQuery) if possible - I realize it would be simple enough to set
transform: rotate(360deg); /*also the vendor-specific versions*/
on the original using JS (and once it reaches 360 reset it to 0 without a transition), but is it possible to do this only using CSS3?
Using CSS3 animation, we can make the block rotate from 0 to 180 degree on hover and then rotate from 180 to 360 degree when not hovered.
#block {
position: absolute;
width: 100px;
height: 50px;
left: 100px;
top: 100px;
background: black;
color: white;
animation-name: out; /* animation to rotate on hover out*/
animation-duration: 1s; /* duration for the animation, increase it to slow it down*/
}
#block:hover {
animation-name: in; /* animation to rotate on hover */
animation-duration: 1s;
}
#keyframes in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes out {
from {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="block"></div>
Note:
This causes the block to rotate on page load also. There is no solution for this other than using JS and nullify the effect on page load.
As you mentioned, there is a bit of snapping when we hover in and out at very quick intervals. This can be explained by having a look at the answers here and here. Once the animation is no longer applicable (that is, the selector is no longer applicable), the animation will abruptly stop and return back to its original un-transformed position.
I am trying to animate the border-width of a circle to give it a pulsating effect. So let's say we define this circle like this:
.bubble {
width: 100px;
height: 100px;
border-radius: 50%;
background: #facf35;
border: solid 14px #fff0cf;
-moz-animation: interaction_bubble 2s infinite;
-webkit-animation: interaction_bubble 2s infinite;
-o-animation: interaction_bubble 2s infinite;
}
And then I define the animation, which changes the "thickness" of the border (e.g. for Firefox)
#-moz-keyframes interaction_bubble {
0%{border: solid 14px #dfe4c7;}
50%{border: solid 24px #dfe4c7;}
100%{border: solid 14px #dfe4c7;}
}
The problem here is, that the whole object itself moves down and to the right due to the change of the size. How can i prevent it from doing that? I want that the object stays at the same place and just the border resizes. Can you help me with that?
Here's a jsFiddle showing the problem: http://jsfiddle.net/Oinobareion/rRTgk/
Thanks in advance!
Instead of changing the border size, just try to apply a scale transformation, e.g.
#-moz-keyframes interaction_bubble {
0%{ -moz-transform: scale(1); }
50%{ -moz-transform: scale(1.4); }
100%{ -moz-transform: scale(1); }
}
example jsbin (for firefox only): http://jsbin.com/ejejet/3/edit
If you want to mantain instead your original animation try to also add
-moz-box-sizing: border-box;
to the style of your element: this make possible to change the border width without affecting the size and the position of the element itself.
Example jsbin (for firefox only): http://jsbin.com/ejejet/4/edit
As a side note your animation could be simplified like this:
#-moz-keyframes interaction_bubble {
0% {border-width: 14px }
50% {border-width: 24px }
100% {border-width: 14px }
}
since you're changing only the border-width property
I did it now with 3 separate elemets, like this. It's a little bit more complicated, but at least it works :-) 2 Elements with the same position lie behind the first circle and are resized.
http://jsfiddle.net/Oinobareion/rRTgk/6/
<div class="bubble position_bubble"></div>
<div class="bubble_animated position_bubble_animated"></div>
<div class="bubble_animated2 position_bubble_animated2"></div>
Let's say I have 2 DIVs:
<div class="div1"></div>
<div class="div2"></div>
I want to rotate both of them:
div {
position: absolute;
width: 100px;
height: 100px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
And then I want to move them independently:
.div1 {
background-color: red;
-webkit-transform: translate(100px,0px);
-moz-transform: translate(100px,0px);
}
.div2 {
background-color: green;
-webkit-transform: translate(0px,100px);
-moz-transform: translate(0px,100px);
}
The problem is that both the rotating and the moving use the transform property, so the moving overrides the rotating. Is it possible to make the values stack together instead of overriding each other?
Notes:
I will be using complex transform functions, not merely simple translations, so I cannot substitute them with just left and top properties.
I have many DIVs, so it is much more efficient to select all of them and apply their common properties, before assigning their individual properties.
Reference: jsFiddle
Unfortunately, due to how the syntax and the cascade work, you won't be able to stack transforms as described. You will have to redeclare the rotations before the translations:
.div1 {
background-color: red;
-webkit-transform: rotate(30deg) translate(100px,0px);
-moz-transform: rotate(30deg) translate(100px,0px);
}
.div2 {
background-color: green;
-webkit-transform: rotate(30deg) translate(0px,100px);
-moz-transform: rotate(30deg) translate(0px,100px);
}
How about using keyframes?
Demo: jsFiddle
Code:
.div1 {
background-color: red;
-webkit-animation: divone 2.0s ease-in-out forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1.0s;
}
.div2 {
background-color: green;
-webkit-animation: divtwo 2.0s ease-in-out forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1.0s;
}
#-webkit-keyframes divone
{
0% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(30deg);}
100% {-webkit-transform: rotate(30deg) translate(100px,0px);}
}
#-webkit-keyframes divtwo
{
0% {-webkit-transform: rotate(0deg);}
50% {-webkit-transform: rotate(30deg);}
100% {-webkit-transform: rotate(30deg) translate(0px,100px);}
}
You state, "I have many DIVs, so it is much more efficient to select all of them and apply their common properties, before assigning their individual properties." It may be more efficient for you coding, but unfortunately not for the results. The only way is to do them all in a single call (as BoltClock just beat me to posting).
To regain efficiency, look at using LESS or SCSS preprocessing. Another answer to a recent question regarding setting up LESS for multiple transitions may be helpful to you.