如何讓CSS動畫免費下載？

Question

在我的反應應用程序中，我在一些組件中使用CSS動畫，但有些時候動畫不平滑。

例如像CSS微調器加載器動畫。如何讓它變成免費的？ 當我們重新加載頁面時，有時旋轉時卡住了旋轉器。

Loader React component 

import React from 'react'; 
import PropTypes from 'prop-types'; 
import './loader.css'; 

class Loader extends React.Component { 
    render() { 
     if (this.props.show) { 
      return (
       <div className="loader-animation-container"> 
        <div className="spinner-container"> 
         <div className="spinner" /> 
        </div> 
       </div> 
      ); 
     } 
     return null; 
    } 
} 

Loader.propTypes = { 
    show: PropTypes.bool.isRequired 
}; 

Loader.defaultProps = { 
    show: false 
}; 

export default Loader; 

少組件：

.loader-animation-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100000; 

    .spinner-container { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     padding: 5px; 
     border-radius: 20px; 
     transform: translate(-50%); 
     z-index: 6; 
     background-color: #fff; 
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12); 

     .spinner { 
      height: 20px; 
      width: 20px; 
      animation: rotate 0.8s infinite linear; 
      border: 2px solid #ff3e6c; 
      border-right-color: transparent; 
      border-radius: 20px; 
      will-change: transform; 
     } 

     @keyframes rotate { 
      0% { transform: rotate(0deg); } 
      100% { transform: rotate(360deg); } 
     } 
    } 
} 

Answer 1

你需要移動@keyframes聲明出來的 「全局」 範圍。關鍵幀不能嵌套在選擇器中。

.loader-animation-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100000; 

    .spinner-container { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     padding: 5px; 
     border-radius: 20px; 
     transform: translate(-50%); 
     z-index: 6; 
     background-color: #fff; 
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12); 

     .spinner { 
      height: 20px; 
      width: 20px; 
      animation: rotate 0.8s infinite linear; 
      border: 2px solid #ff3e6c; 
      border-right-color: transparent; 
      border-radius: 20px; 
      will-change: transform; 
     } 
    } 
} 

@keyframes rotate { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

Working JSFiddle Demo