代码之家 › 专栏 › 技术社区 › Or Assayag

仅从第二次开始具有间隔和延迟的CSS动画

css-transforms css-animations less css

-1

Or Assayag · 技术社区 · 6 年前

我想表演一些有间隔的div动画。在第一次播放动画时,它会被延迟,然后(从第二次开始)会有一个间隔。之后,动画将每X秒播放一次。

@-webkit-keyframes shake {
10%,
90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
}
20%,
80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
    -webkit-transform: translate3d(-4px, 0, 0);
    transform: translate3d(-4px, 0, 0);
}
40%,
60% {
    -webkit-transform: translate3d(4px, 0, 0);
    transform: translate3d(4px, 0, 0);
    }
}
@keyframes shake {
    10%,
    90% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
}

.error-container {
    position: absolute;
    left: auto;
    border-collapse: separate;
    margin: 0;
    padding: 2px 10px;
    list-style: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: #d9534f;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: none;
    z-index: 100;
    &.active {
        display: block;
        -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

没有任何Javascript就可以吗?
谢谢。
demo

2 回复 | 直到 6 年前

Muhammad Osama 6 年前

干得好。我所做的是我改变了代码,使完整的动画结束在20%,然后它将不做任何事,直到100%。有关详细信息,请访问 link
注意 :您也可以将webkit克隆到关键帧代码。我把它拿走了

  @-webkit-keyframes shake {
    2%,
    18% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    4%,
    16% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    6%,
    10%,
    14% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    8%,
    12% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
    100%{
       -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
}


.error-container {
    position: absolute;
    left: auto;
    border-collapse: separate;
    margin: 0;
    padding: 2px 10px;
    list-style: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: #d9534f;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: none;
    z-index: 100;
    &.active {
        display: block;
       animation: shake 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both  infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

Ram kumar 6 年前

您可以在上更改迭代 animation-duration 这是一个例子

@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
* {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: purple;
  font-family: 'Montserrat', sans-serif;
}
html, body {
  height: 100%;
}

button {
  background: #333;
  color: #fff;
  border-radius: 40px;
  padding: 15px 30px;
  border: 0;
  overflow: hidden;
  width: 200px;
  transition: 
    all        1.2s,
    border     0.5s 1.2s,
    box-shadow 0.3s 1.5s;
  white-space: nowrap;
  text-indent: 23px;
  font-weight: bold;
  }
  span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition: 
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
  button:hover {
    text-indent: 0;
    background: #55706D;
    color: #FFE8A3;
    width: 250px;
    }
    button:hover span {
      transform: translateX(0);
      opacity: 1;
    }

<button>
  Animate
  <span>After Delay</span>
</button>