📜  CSS |动画

📅  最后修改于: 2021-08-31 07:53:49             🧑  作者: Mango

什么是 CSS 动画?
CSS 动画是一种改变网页中各种元素的外观和行为的技术。它用于通过更改元素的运动或显示来控制元素。它有两个部分,一个包含描述元素动画的 CSS 属性,另一个包含某些关键帧,这些关键帧指示元素的动画属性以及这些必须发生的特定时间间隔。

@keyframes 规则:关键帧是 CSS 动画工作的基础。它们定义了动画在其整个持续时间的各个阶段的显示。例如:在下面的代码中,段落的颜色随着时间的推移而改变。完成度为 0% 时为红色,完成度为 50% 时为橙色,完成度为 100% 时为棕色。

例子:



    
        
    
    
        
            
GeeksforGeeks
            
A computer science portal for geeks
        
                                                                   

输出:

极客为极客
极客的计算机科学门户

动画属性:下面给出了某些动画属性:

  • 动画名称:用于指定描述动画的@keyframes 的名称。
    animation-name: animation_name;
    
  • animation-duration:用于指定动画完成一个循环所需的时间。
    例子:
    
        
            
        
        
            
                
    GeeksforGeeks
                
    A computer science portal for geeks
            
                                                                      

    输出:
    动画持续时间

  • animation-timing-function:指定动画如何通过关键帧进行过渡。它可以具有以下值:
    • 缓动:动画开始缓慢,然后快速,最后缓慢结束(这是默认值)
    • 线性:动画从头到尾以相同的速度播放
    • 缓入:动画播放缓慢
    • 缓出:动画播放缓慢
    • 缓入缓出:动画缓慢开始和结束。

    例子:

    
    
        
            
        
        
            
    GeeksforGeeks
            
    A computer science portal for geeks
            

    This text is ease.

            

    This text is linear.

            

    This text is ease-in.

            

    This text is ease-out.

            

    This text is ease-in-out.

                             

    输出:
    动画功能

  • animation-delay:用于指定动画开始时的延迟。
    例子:
    
    
        
            
        
        
            
    GeeksforGeeks
            
    A computer science portal for geeks
            

    Text animation without delayed.

            

    Text animation with 10 second delay.

                             

    输出:
    动画延迟

  • animation-iteration-count:用于指定动画重复的次数。它可以指定为无限以无限期地重复动画。
    例子:
    
    
        
            
        
        
            
    GeeksforGeeks
            
    A computer science portal for geeks
            

    This text changes its color two times.

            

    This text changes its color infinite times.

                                                

    输出:
    动画迭代次数

  • animation-direction:指定动画的方向。它可以具有以下值:
    • normal:动画向前播放。这是默认值。
    • reverse:动画以相反的方向播放,即向后
    • 交替:动画先向前播放,然后向后播放
    • 交替反转:动画先向后播放,然后向前播放。

    例子:

    
    
        
            
        
        
            
    GeeksforGeeks
            
    A computer science portal for geeks
            

    This text is normal.

            

    This text is reverse.

            

    This text is alternate.

            

    This text is alternate-reverse.

                                             

    输出:
    动画方向

  • 动画填充模式:指定动画在执行前后应用的值。
    • none:动画在执行之前或之后不会对元素应用任何属性。 (默认)
    • forwards:动画完成后,元素将保留与最后一个关键帧相同的动画属性。
    • 向后:元素将在动画开始之前获取第一个关键帧的属性。
    • both:动画将遵循前进和后退的规则,即它会在开始前获取为初始关键帧定义的属性,并在动画完成后保留最后一个关键帧的值。

    例子:

    
    
        
            
        
        
            
    GeeksforGeeks
            
    A computer science portal for geeks
            

    none

            

    forwards

            

    backwards

            

    both

                                       

    输出:
    动画片

  • 动画播放状态:允许您播放/暂停动画。

    动画速记属性:它是暗示动画属性以加快代码速度的一种速记方式。属性应按以下顺序排列:

    animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] 
              [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

    例如,通常动画代码是这样的:
    例子:

    
    
        
            
        
        
            
        
                                       
    

    输出:
    动画片

    简而言之,上面的 HTML 代码可以写成:
    例子:

    
    
        
            
        
        
            
        
                        
    

    输出:
    动画片