Google AMP 飞入动画

AMP HTML页面添加视觉效果很容易使用amp-fx-collection组件，它提供了一系列效果集合，例如背景图像可以从屏幕的任何一侧进入框架，这是一个非常流行且现在在网页中看到的常见效果。

所需脚本：将amp-fx-collection导入标头

属性：

1. data-duration：它指定动画在经过时间后变为静态的持续时间。
2. 数据缓动：在整个持续时间内改变动画速度。
3. data-margin-start/end：指定动画应该在视口的边距的百分之几处开始。
4. data-repeat：即使在滚动后完全加载后也要重复动画。
5. fly-in-bottom/top：元素从顶部或底部飞入。
6. fly-in-left/right：元素从右侧或左侧飞入。

例子：

HTML

  

    
    Google AMP amp-fx-collection
  
    
    
      
    
    
    
  
    
  
    
  
    
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
  
    
        .header {
            position: relative;
            overflow: hidden;
        }
  
        .header h1 {
            color: white;
            bottom: 10%;
            left: 10px;
            position: absolute;
            z-index: 1;
            font-size: 1.7em;
        }
  
        .title {
            background-color: black;
            color: white;
        }
  
        .parallax-image-window {
            overflow: hidden;
        }
  
        .parallax-image-window amp-img {
            margin-bottom: -20%;
        }
    

  

  
    
    
    
  
    
    
    
  
    
    
    
  
    
    
    

  

输出：下图是静态的。每个人都有飞入动画。