Foundation CSS Motion UI 内置过渡

Foundation CSS是最好的响应式框架之一。 CSS 框架适用于任何设备、屏幕，并且可以广泛访问。我们可以在基础 CSS 的帮助下制作漂亮的响应式网站。它是一个高度可定制的框架。它是由 ZURB 基金会构建的开源框架。

Foundation CSS Motion UI是一个用于在网站中创建灵活的 UI 过渡和动画的库。我们可以使用内置动画，也可以使用这个库创建我们自己的动画。

Foundation CSS Motion UI Built-in Transitions是一组由基础 CSS 预定义的动画。

Foundation CSS Motion UI 内置过渡类：

动画配置：

• Speed：该类可用于指定或配置动画的速度，可以是正常、快或慢。
• Easing：该类可用于指定或配置动画的缓动，可以是线性、缓动或反弹。

动画类型：

• Slide：该类用于为对象添加不同类型的滑动动画。
• Fade：该类用于为对象添加不同类型的淡入淡出动画，可以是淡入淡出。
• 铰链：该类用于为对象添加不同类型的铰链动画。  
• Scale：该类用于为对象添加不同类型的缩放动画。  
• Spin：该类用于为对象添加不同类型的旋转动画。

语法：在 element 的 class 字段中设置speed和easing参数，然后播放需要的动画如下：

    MotionUI.animateIn('img', 'slide-in-down') 

示例：在示例中，我们有一些动画，它们的速度和缓动一样轻松。

HTML

  

    
    
    GeeksforGeeks
      
    
    
    
      
    
    
    
    
    

  

    
        
            GeeksforGeeks 
         
        Foundation CSS Motion UI Built-in Transition
        
        
                slide-in-down 
        
        
                slide-in-right 
        
        
                fade-in 
        
        
                hinge-in-from-top 
        
        
                hinge-in-from-middle-y 
        
        
                scale-in-up 
        
        
                spin-in-ccw 
        
         
    
     
        
    
    
        const playAnimation = (animation) => {
            MotionUI.animateIn('#img', animation)
        }
    

输出：

参考： https ://get.foundation/sites/docs/motion-ui.html#built-in-transitions