I have here any animation on my page: https://tikex-dev.com
active class turn on this:
animation: btn-text-anima 1s linear infinite
If I turn it off, page laggin almost dismiss. Why is this animation so performace intensive?
.btn-text:not(.btn-video).active:after {
animation: btn-text-anima 1s linear infinite;
}
#keyframes btn-text-anima {
0% {
right: -30px;
opacity: 0;
}
60% {
right: -40px;
opacity: 1;
}
100% {
right: -45px;
opacity: 0;
}
}
Chaning the right attribute in your animation is probably the root cause of the problem. This is because the right attribute defines the position of the element, on which other positions depend, resulting in a complete redraw.
So you should use transform, which will run after the rendering in a post-processing step.
So using something like transform: translateX(-30px); instead of right: -30px should help you. How this will exactly behave will however depend on other contetn of your page, but this should give you a general idea.
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 div which I need to animate it's opacity from 1 - 0, and THEN hide it, as some of you may know, adding display properties just override transitional values and hide the element straight away, so I'm wondering if there's a way with css to animate it's opacity, and THEN hide it?
Here's what I've tried:
#keyframes infrontAnimation {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 1;
}
50% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
100% {
display: none;
}
}
This doesn't work, it just hides straight away, it also doesn't stay at the 100% value:
Using it like this:
animation: infrontAnimation 1s 2s ease-out;
So my question is, is it possible to hide something, but only after a certain animation is finished?
Rather than setting the height or width of an element, I found a different approach, that to me, isn't as dodgy as forcing the height at 99.9%. Here's what I came up with:
First, Rather than using display to hide & show it, I used visibility, seeing as it's still something that can interrupt our animation and ultimately cause it to fail, I setup our transition properties initially:
Note: I'll keep other prefixes out for this demo:
.item {
transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}
So what we're doing is setting the transition of the visibility attribute to 0, but delaying it by the time it takes to complete the fade out (opacity);
So when we want it to be visible, we add the class of visilble:
.item.visible {
transition-delay: 0s;
visibility: visible;
opacity: 1;
}
So we're setting our delay to 0 here so that we can override the state when it transitions in, obviously we dont' want to delay the visibility, we want to set that straight away and then animate our opacity;
Then when we want to hide it:
.item.hidden {
opacity: 0;
visibility:hidden;
}
Then all this is doing is transitioning our opacity back to 0, and leaving our delay at 0.7 so that it doesn't actually 'dissappear' in the dom until the opacity has finished.
Detailed Working Example
Fist of all, I've created a Fiddle to show what can be done. The red bars represent other content, like text.
Say, if you want to hide it in a way that it first fades, then shrinks, you could use
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
animation: infrontAnimation 1s 2s forwards ease-out;
-webkit-animation: infrontAnimation 1s 2s forwards ease-out;
Note that both #keyframes as #-webkit-keyframesare used.
If you need to hide it without shrinking animation, you might want to use this
#-webkit-keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
#keyframes infrontAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
99.9% {
opacity: 0;
height: 200px;
}
100% {
opacity: 0;
height: 0;
}
}
You need to set animation-fill-mode: with the value forwards so it ends on the last frame of the animation.
See: http://dev.w3.org/csswg/css-animations/#animation-fill-mode
I have read about how using translate has better performance, but it seems they behave slightly differently: using left:100% moves the animated object all the way to the end of the screen, whereas translate(100%) only moves the animated object as far as its length. That is, it moves 100% of the screen versus 100% of the object.
Can explain why this is, and what can be done to reproduce the same behavior when using translate?
You can see a demo here: http://jsfiddle.net/32VJV/1/
.slide_1 {
top: 0px;
left:0%;
position: absolute;
overflow: hidden;
font-size: 30px;
}
.slide_1 {
-webkit-animation: slide 3s infinite;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode:forwards;
-webkit-transform-origin: 0% 0%;
}
.slide_2 {
top: 25px;
left:0%;
position: absolute;
overflow: hidden;
font-size: 30px;
}
.slide_2 {
-webkit-animation: slide2 3s infinite;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode:forwards;
-webkit-transform-origin: 0% 0%;
}
#-webkit-keyframes slide {
0% {
-webkit-transform: translate(0%);
}
50% {
-webkit-transform: translate(100%);
}
100% {
-webkit-transform: translate(0%);
}
}
#-webkit-keyframes slide2 {
0% {
left 0%;
}
50% {
left:100%;
}
100% {
left:0%;
}
}
<div style="font-size:18px;">
<div class=""> <span class="slide_1" id="dimensions">ABC</span> <span class="slide_2" id="dimensions">ABC</span>
</div>
</div>
The difference between the two is that animating a property like left will keep the element in the flow of the document whereas translate does not.
For more information on why you might use one or the other, Paul Irish has an excellent write up (with links to more information): Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
There's also a lot of great information on browser performance at jankfree.org
Solution for the translate animation: make the element as wide as the window:
Example
slide_1 {
top: 0px;
left:0%;
right: 0;
position: absolute;
overflow: hidden;
font-size: 30px;
}
An interesting exercise: Open your devtools and what what happens when you activate one animation at a time.
In Chrome:
The translate animation has basically nothing going on except a periodic GC
The Left animation you will see repeatedly:
Recalculate Style
Layout
Pain Setup
Paint
Composite Layers
In this case, the overhead it pretty small, but that can change quickly depending on what is being moved around the screen.
Is it possible, using CSS transitions, to tilt (rotate) an element slightly off-horizontal during the first half of its movement--and tilt it back to horizontal during the second half, as it reaches the end of its movement? I don't want a 360-degree spin. Just a slight tilt, then tilt back again.
Here's a picture of the beginning, middle, and end of the transition I have in mind:
This question is best demonstrated by watching it. Here's a fiddle that shows what I would like to achieve--but I'd like to achieve it with CSS transitions, not JavaScript:
http://jsfiddle.net/bmorearty/S5Us6/22/
When you run this, watch the gray box closely. It tilts a bit during motion, then reverses its tilt halfway through--so when it comes to rest, it is no longer tilted.
I would like whole motion this to happen in a single transition from one state to another simply by adding a class to an element--not in two transitions, because that would require me to time the end of one with the beginning of the next.
I suspect the answer would incorporate transition-delay and/or #keyframes.
Thanks.
this would be the css for it:
#card {
padding: 2em;
border: 1px solid gray;
display: inline-block;
position: relative;
background-color: #eee;
/*instead of infinite you can add a number of times you want it running*/
animation: moving infinite 6s;
}
#keyframes moving {
0%{
margin: 0;
}
50% {
-webkit-transform: rotate(45deg);
}
100% {
margin: 50px;
}
}
You could do something like this.
http://cdpn.io/sIxFA
Obviously, you could smooth out the rotation as you please, and add the rotate class on click.
I got it!
The solution is to use a CSS animation with a keyframe that transforms the rotation (e.g., to about 8deg) when it is 50% of the way through, but returns the rotation to 0deg at the end. It's pretty sweet.
Here's a demo on JSBin:
http://jsbin.com/ogiqad/4/edit
(The code below uses -webkit but you can add all the other browser variations to make it work on more browsers.)
#-webkit-keyframes tilt-and-move {
0% {
left: 0;
top: 0;
}
50% {
-webkit-transform: rotate(8deg);
}
100% {
left: 100px;
top: 100px;
}
}
#card {
position: relative;
}
#card.moved {
left: 100px;
top: 100px;
-webkit-animation-duration: 0.4s;
-webkit-animation-name: tilt-and-move;
}
What is a syntactically clean solution to run a chain of individual CSS3 transitions on a single element, one by one? An example:
set left to 10px and opacity to 1 through 200ms
set left to 30px through 500ms
set left to 50px and opacity to 0 through 200ms
Can this be done without JavaScript? If not, how to code it cleanly with JavaScript?
I believe you want a CSS3 animation where you define the CSS styles at different points in the animation and the browser does the tweening for you. Here's one description of it: http://css3.bradshawenterprises.com/animations/.
You will have to check on browser support for your targeted browsers.
Here's a demo that works in Chrome. The animation is pure CSS3, I only use Javascript to initiate and reset the animation:
http://jsfiddle.net/jfriend00/fhemr/
The CSS could be modified to make it work in Firefox 5+ also.
#box {
height: 100px;
width: 100px;
background-color: #777;
position: absolute;
left: 5px;
top: 5px;
opacity: 0;
}
#-webkit-keyframes demo {
0% {
left: 10px;
}
22% {
opacity: 1;
}
77% {
left: 30px;
}
100% {
left: 50px;
opacity: 0;
}
}
.demo {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
In pure CSS this can be done with the transition-delay property, with it you can delay the second and third transition.
I personally would like a JS solution better. timeouts or the "transitioned" event can be used to achieve this.
I would also suggest the script.aculo.us (or the beta v2: scripty2), it is especially designed to make programming these kinds of things efficient and easy.