时间戳

首页 > 解决方案 > 如何使用线性渐变和关键帧使动画使用 css 平滑？

css - 如何使用线性渐变和关键帧使动画使用 css 平滑？

问题描述

我正在实现类似于 facebook 骨架屏幕的加载。我必须为卡做同样的事情。链接到 codepen https://codepen.io/harika123/pen/dyPmXMe

下面是代码，

.card { 
    box-shadow: 3px 3px 5px 0 rgba(0, 0,0, 0.15);
    width: 309px;
    position: relative;
    left: 250px;
    background-color: black
 }

   .loading-ui-shimmer {
         background-image: linear-gradient(90deg, rgba(207, 216, 220, 0.15), rgba(207, 216, 220, 
         0.35), rgba(207, 216, 220, 0.15));
         background-size: 100% 100%;

        -webkit-animation-duration: 1.4s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: loadanimation;
        -webkit-animation-timing-function: ease;
   }

   @-webkit-keyframes loadanimation {
      0% {
          background-position: -136px 0;
      } 
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: -136px 0;
      }
  }

正如您从 codepen 看到的那样，动画不流畅，我希望它流畅。我在看一些教程，他们用下面的东西作为他们的例子

@keyframes loadanimation {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }

    .loadingAnim {
        margin: 0 0 16px;
        padding: 6px;
        width: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(207, 216, 220, 0.15), rgba(207, 216, 220, 0.35), 
        rgba(207, 216, 220, 0.15));
        animation: loadanimation 1.4s ease infinite;
        background-size: 600% 600%;
    }

我想我搞砸了关键帧的背景位置。在我的示例中，loading_animation 类中的背景大小应该是多少（您可以从 codepen 看到）有人可以帮我解决这个问题。谢谢。

标签： css

解决方案

推荐阅读