WHY my animated text are not coming on one line
Question
The output above the button which is text inclosed in brackets the problem is its a moving word but it's not getting placed in proper position insted it's going up and down.
I have used animated button which works fine bu the text in the brackets is scrolling as per the
need. Though i've tried a lot but not geting the desired answer
.background {
background-color: darkorange;
width: 100%;
height: 100%;
position: absolute;
}
.first{
color: orange;
text-align: center;
position: fixed;
left: 0%;
right: 0%;
z-index: 9999;
margin-left: 40px;
margin-right: 20px;
margin-top: 250px;
}
<!-- for button patrs css code -->
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<!-- For body parts css codes -->
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:before {
content: '[';
left: 0;
}
.content__container:after {
content: ']';
position: absolute;
right: 0;
}
.content__container:after, .content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
@-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-webkit-keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -75%, 0);
transform: translate3d(0, -75%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
}
@keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -60%, 0);
transform: translate3d(0, -60%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -40%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -20%, 0);
}
}
<html>
<link rel="stylesheet" href="stylesheet.css">
<div class="background"></div>
<body>
<div class="content">
<div class="content__container">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
<button class="button"><span>Login</span></button>
<button class="button"><span>Register</span></button>
</div>
</body>
</html>
<!-- end snippet -->
1 answers
solution1
0 ACCPTED 2017-08-31 20:37:16
I think you want something like this :
.background { background-color: darkorange; width: 100%; height: 100%; position: absolute; } .first{ color: orange; text-align: center; position: fixed; left: 0%; right: 0%; z-index: 9999; margin-left: 40px; margin-right: 20px; margin-top: 250px; } <!-- for button patrs css code --> .button { border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 10px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 10px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } <!-- For body parts css codes --> .content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: 'Lato', sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weight: 600; overflow: hidden; height: 40px; padding: 0 40px; } .content__container:before { content: '['; left: 0; } .content__container:after { content: ']'; position: absolute; right: 0; } .content__container:after, .content__container:before { position: absolute; top: 0; color: #16a085; font-size: 42px; line-height: 40px; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } .content__container__text { display: inline; float: left; margin: 0; } .content__container__list { margin-top: 0; padding-left: 110px; text-align: left; list-style: none; -webkit-animation-name: change; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: change; animation-duration: 10s; animation-iteration-count: infinite; } .content__container__list__item { line-height: 40px; margin: 0; } @-webkit-keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes change { 0%,15%{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25%, 40% { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 50%,65% { -webkit-transform: translate3d(0, -63%, 0); transform: translate3d(0, -63%, 0); } 75%,90% { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 100%{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes change { 0%,15%{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25%, 40% { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 50%,65% { -webkit-transform: translate3d(0, -63%, 0); transform: translate3d(0, -63%, 0); } 75%,90% { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 100%{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
<div class="background"></div> <body> <div class="content"> <div class="content__container"> <div class="content__container"> <p class="content__container__text"> Hello </p> <ul class="content__container__list"> <li class="content__container__list__item">world !</li> <li class="content__container__list__item">users !</li> <li class="content__container__list__item">everybody !</li> </ul> </div> </div> <button class="button"><span>Login</span></button> <button class="button"><span>Register</span></button> </div>
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.
Related Question
Image and text coming in same line
what to create a animated line threw text that is in a link?
Why is my text wrapping onto a second line?
Why wordpress inserts my html in one line?
Why my divs dont want to be in one line?
How to break text from one line to another line in my list
Move text while one word is being animated
why input tag and button tag are not coming together and coming in separate line
animated background covers all of my text
Why cant I animated multiple text with JS
Related Tags