How do you create fancy animation effects with these simple CSS tricks
I hate that clickbait articles are as many as possible, and that’s not one of them. So, let me just put these tips right here and save you 10 minutes.
Define CSS animation and a handful of @ keyframes, set the element of the initial state (opacity: 0, the scale (0), etc.), set animationCSS properties of the elements is one of the animation you just defined, set animation way of filling recently, tang ease don’t always use the old timer function, but try some cool cubic bezier. By coordinating the whole thing, the animation- delay. Keep clean and elegant and avoid a wide range of sports. Only animation transform and opacity. Always strive for 60fps.
Simple, huh? This is obviously an agnostic, because an element animation is triggered when it is inserted into the DOM or its display property is triggered from none visibility. This is the normal behavior of any frame router, so no matter what your preferred front-end stack is, you can easily go there.
Display data title
I’ll explain how the entire animation technology works by phase-out the title of our sample website. We first identified the three agents that we wanted to generate the animation independently:
We basically have three agents that we want to show at different times. I used blue to show my time offset for each agent. We want agent 1 and agent 3 to fade neatly from the left. For agent 2, there’s a cool zoom in from left to right that looks like it goes from agent 1 to agent 3. We first define our core CSS animation:
Because we just fade – in – right the initial state of element are defined as hidden and is moving to the left, and the final state will make our elements show fully opaque state, and its positioning to its natural position. Let’s see I only have a 15px moving range. Always avoid moving long distances; The whole secret lies in subtle movements. The code grow-left is almost self-explanatory, so I really don’t need to go into the details. The cool thing here is to see that I’ve only animated the following two CSS properties: transform and opacity. If you are truly committed to high performance, 60fps animations, you may need to learn more about why you should avoid setting the animation effect for any other property.
Now that we’ve defined our animation, let’s apply them to our agents. Three important things to remember before you look at the code:
Sets the initial state of the element in the default CSS property
Use the forwards so that the final state is retained as the filling mode of the animation
See how we define the initial state of agent 1 and agent 3, opacity: 0 because we want them to be hidden until the transformation fades out. Then, we set the animation to the old ease function and the forward filling mode that defined the fade-in-right. Because we still hope to Agent 3 later entered the scene, so we set up an animation – delay: 0.8 s basically means that the animation will not start the animation, until the elements are placed on the DOM or through the display attributes visible so far has been 800 ms. It’s really easy, isn’t it?
Now, agent 2 is a little bit different. The initial state is set to transform: scaleX(0) or our element will be amplified until the animation begins. So, by setting the initial Settings, we indicate how the element should be rendered before the animation is triggered. Then we set its transform-origin: left attribute to enlarge the line from left to right, or its anchor point will become the default center. Then, we set the animation: grow-left to fill the mode, and then make sure that it does not play well in the DOM for 0.4 seconds. Interestingly, we did not use the default ease function as our animation time function, but instead defined a custom function cubic-bezier function. This enables us to create more interesting and visually appealing transformations than the browser default. Keep trying cubic-bezier to use this very interesting tool to define your own.