关键帧动画在 :before 和 :hover css 中不起作用答案

【问题标题】：keyframes animation not work in :before and :hover css关键帧动画在 :before 和 :hover css 中不起作用
【发布时间】：2021-04-18 06:55:56
【问题描述】：

我在悬停和标签之前使用关键帧时遇到问题。我无法弄清楚为什么它们不起作用以及如何使它们起作用。如果我在没有关键帧的情况下使用它们，它们可以工作，但在这种情况下我必须使用关键帧。我正在使用“样式化组件”库

const tmp = keyframes`

     from, to {
            content: '';
            position: absolute;
            top: 0;
            left: 180%;
            height: 100%;
            width: 100%;
            background: rgba(255,255,255,.3);
            z-index: 1;
            transform: skew(45deg);
            transition: .5s;
     }
`;

const tmp1 = keyframes`

     from, to {
           left: -180%;
     }
`;

const ImageWrapper = styled.div`
      width: 300px;
      height: 400px;
      position: relative;
      overflow: hidden;
      
      &:before {
            -webkit-animation: ${tmp} 1s forwards;         
      }
      
      &:hover:before {
           -webkit-animation: ${tmp1} 1s forwards;
      }
       
   `;

【问题讨论】：

标签： css reactjs css-animations styled-components keyframe

【解决方案1】：

我可能遗漏了一些东西，但我在文档中看不到关键帧的语法。

试试这个

    const tmp = keyframes`

     from{}
     to {
            content: '';
            position: absolute;
            top: 0;
            left: 180%;
            height: 100%;
            width: 100%;
            background: rgba(255,255,255,.3);
            z-index: 1;
            transform: skew(45deg);
            transition: .5s;
     }
`;

const tmp1 = keyframes`

     from {}
    to {
           left: -180%;
     }
`;

【讨论】：