格 千格 KiloCell

CSS animation generator

Visualising Edit CSS Key Frames, Preview Animation Effects in Real Time

Animation presets
Bounce
Dither (Shake)
Pulse
Rotate (Spin)
Gradient (Fade)
Slide
Flip
Swing
CSS Code 













CSS Animator Guide: Creating a Flowing Web Interactive Experience



            In the modern web design, the Internet is a new place for people to work.
            CSS Animation
            It is an important means of enhancing user experience. It not only makes the pages more dynamic, but also provides the necessary interactive feedback.
          


1. Why CSS animation?



            Compare JavaScript Animation, CSS Animations usually perform better, as they can be optimized by browsers in the synthesis thread. Use
            @keyframes
            Define animated, combined
            animation
            Properties, which can achieve very complex visual effects.
          


2. Analysis of core attributes


    

  • 
(d) The duration of the development:
              Animation of the time required to complete a cycle.
            
    • 

  • 
Timing Function (time function):
              Defines animated speed curves, e. g.
              ease-in-out
              or customise
              cubic-bezier
              。
            
    • 

  • 
Keyframes (Keyframes):
              Defines the style of animated in a given percentage state.
            
    • 



3. Common cases of actual warfare


Case one: the buttons that draw attention to action


When the user is not operational for a long time, the " Pulse " , which has a weak scaling effect, can be used to alert the user to click.


Case II: Smooth load-holders



            Using the Gradient (Fade) or bit-shifting effect, you can create modern skeleton screen to load animations.
          


Case III: Form error alarm



            When the user submits invalid data, use " Dithering " (Shake) "Effect simulation of negative actions in the physical world is more intuitive than a simple red-word reminder.
          


4. Performance optimization techniques


    

  • 
Prefer to transform and opacity:
              Changing these properties does not trigger the layout (Layout) or repaint, with the highest performance.
            
    • 

  • 
will-change：
              Use for complex animations
              will-change: transform;
              Tips the browser pre-optimal.
            
    • 

  • 
To avoid too many animations:
              Too many page animations distract users and even cause dizziness.
            
    • 




            Through ours.
            Visual CSS Animator
            , you can visualize the style of each percentage point, preview the effect in real time and directly access the CSS codes available in the production environment.