Google AMP 流行动画

在 AMP HTML 页面中，使用amp-fx-collection组件可以轻松添加视觉效果，该组件提供一系列效果集合，例如背景图像不透明度不断增加直到可见的淡入。

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

属性：

1. data-duration：指定动画在经过一段时间后变为静态的持续时间。
2. 数据缓动：在整个持续时间内改变动画速度。
3. data-margin-start/end：指定动画应该在视口的边距百分比是多少。
4. data-repeat：即使在滚动后完全加载后也要重复动画。
5. fade-in-scroll：当图像在视口内滚动时改变图像的不透明度。

例子：

HTML

  

    
    Google AMP fad-in Animation
  
    
    
  
    
    
    
  
    
  
    
  
    
        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%;
        }
    

  

    
    
    
  
    
    
    
  
    
    
    
  
    
    
    

  

输出：