How to pause an animation and blink at the same time?
Hello i am having a container with a content in it. My content is a text with animation :
animation: move 15s linear infinite; my keyframes :
@keyframes move { 0% { transform: translate(50px); opacity: 1; } 50% { transform: translate(430px); opacity: 1; } 100% { opacity: 1; transform: translate(50px); } } At the 50% its at the end for the container thats where i want it to pause for a sec or two and blink and after that it can follow the instructions which i gave here:
(100% { opacity: 1; transform: translate(50px); }) can someone help me with that?
thanks
You can use multiple steps in your keyframes to create the blinking effect. If you want the element to stay in place when doing so, just make sure to add the same position (in this case transform: translate(430px);.
Is this what you were looking for?
.box { width: 50px; height: 50px; background-color: orangered; transform: translate(50px); animation: move 5s; } @keyframes move { 0% { transform: translate(50px); opacity: 1; } 50% { transform: translate(430px); opacity: 1; } 52% { transform: translate(430px); opacity: 0; } 54% { transform: translate(430px); opacity: 1; } 56% { transform: translate(430px); opacity: 0; } 58% { transform: translate(430px); opacity: 1; } 60% { transform: translate(430px); opacity: 1; } 100% { opacity: 1; transform: translate(50px); } }<div class="box"></div>
