How to make text slide from the left (hidden to visible), then stop in the middle and then slide all the way to right and out of the page and repeat?
Question
I am want this announcement to be animated, with the text sliding in from the left, pausing in the middle and sliding out to the right and repeat.
<div class="announcement-bar>
<p class="announcement-animation>Free two day Shipping</p>
</div>
Here is the css animation code I figured out. But the issue is that the text is not centering properly. It takes the starting of the element(p tag), the letter F, to the center of page and not the center of element. What am I doing wrong?
.announcement-bar p {
width: max-content;
position: relative;
left: -50px;
animation: move 8s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes move
{
37.5% {
left: calc(50% - 25px); opacity: 1; -webkit-filter: opacity(1);
}
75% { left: calc(50% - 25px); opacity: 1;}
85% { left: 80%; opacity: 0;}
100% {opacity: 0;}
}
1 answers
solution1
0 2022-08-18 16:17:44
My example (code below) is based on a 1920px width viewport. Which means that if you're gonna use this animation for mobile devices it won't work properly. If you want to change the speed of the animation you need to alter the “animation: announcement..s linear”. If you want to change the place the animation stops midway (you'll need to change this with the media query if you want to make this kind of animation for Mobile viewports), alter the “40% {margin-left: …px;} 60%{margin-left: …px;}”.
body {
margin: 0;
padding: 0;
}
.announcement-bar {
width: 100%;
}
.announcement-animation {
margin-left: -200px;
animation: announcement 12s linear;
animation-fill-mode:none;
animation-iteration-count: infinite;
animation-delay: 2s;
white-space: nowrap;
font-family: Arial, Helvetica, sans-serif;
}
@keyframes announcement{
0% {
margin-left: 0px;
}
40% {
margin-left: 800px;
}
60%{
margin-left: 800px;
}
100% {
margin-left: 2000px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="announcement-bar">
<p class="announcement-animation">Free two day Shipping</p>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.