每秒缩放 css 动画，无需悬停

Question

我想缩放这个价格标签，但我只知道如何在悬停时进行缩放。但我想每 3 秒做一次而不悬停。我尝试了很多动画方法，但它失去了 15 度旋转

HTML:

<div class="tagContainer"><div class="priceTag"><div class="priceText">Rebajado<br>¡Hasta el<br>22/03!</div></div></div>

CSS:

.tagContainer {
    margin:20px;
    display:inline-block;
}

.priceTag {
    background-color: #525199;
    width: 141px;
    height: 102px;
    clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 100%, 20% 100%, 0% 70%, 0% 30%);
    border-radius: 5px 5px 5px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0px 0px 0px 14px;
    transition: transform 300ms  ease-in-out;
    transform: rotate(15deg);
    
}

.priceTag:hover {
    transform: scale(1.1) rotate(15deg);
}

.priceTag:after {
    content: "";
    background-color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    left: 15px;
    top: 45px;
}

.priceText {
    color: white;
    display: flex;
    align-self: center;
    line-height: 20px;
    text-align: center;
    
}

Answer 1

我真的不是这方面的专家，但我拿了你的代码，把它放在一个 JSFiddle 中，并添加了一点 code similar to what I found here。似乎有效：

https://jsfiddle.net/b3fze87w/1/

按下“运行”按钮。

诀窍是添加：

.priceTag {
    animation-duration: 3s;
    animation-name: zooming;
    animation-iteration-count: infinite;
}

添加到 priceTag，然后像这样制作关键帧：

@keyframes zooming {
  80% {
    transform: rotate(15deg);
  }
  90% {
     transform: scale(1.1) rotate(15deg);
  }
  to {
    transform: rotate(15deg);
  }
}

我相信这可以进一步优化。

Answer 2

如果我理解正确，你必须在这里使用animation-iteration-count 属性：

.priceTag {
    animation-duration: 3s;
    animation-name: zooming;
    background-color: #525199;
    width: 141px;
    height: 102px;
    clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 100%, 20% 100%, 0% 70%, 0% 30%);
    border-radius: 5px 5px 5px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0px 0px 0px 14px;
    transition: transform 300ms  ease-in-out;
    transform: rotate(15deg);

    animation-iteration-count: infinite;
}

看看这个https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

Answer 3

试试这个：

.priceTag {
    background-color: #525199;
    width: 141px;
    height: 102px;
    clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 100%, 20% 100%, 0% 70%, 0% 30%);
    border-radius: 5px 5px 5px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0px 0px 0px 14px;
    transform: rotate(15deg);
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;

}

@keyframes example {
    from {
        background-color: #525199;
    }

    50% {
        transform: scale(1.1);
        background-color: #DB2955;
    }

    to {
        transform: scale(1) rotate(15deg);
        background-color: #525199;
    }
}

每秒缩放 css 动画，无需悬停

Scale css animation every second without hover

html

css

animation

transform

transition