I have a problem centering a text rotating animation. The first word appears correctly at the center of the page (centered both horizontally and vertically) but the second and third one appear at the top of the screen (only centered horizontally). I want them to appear at the center of the page one after the other. Thanks in advance!
Here is the code used:
.slidingHorizontal{
font-family: Helvetica ;
font-size: 82px;
text-shadow: grey 0px 0px 4px ;
text-align: center;
display: inline;
text-indent: 8px;
color: black;
}
.slidingHorizontal span{
animation: leftToRight 7.5s linear infinite 0s;
-ms-animation: leftToRight 7.5s linear infinite 0s;
-webkit-animation: leftToRight 7.5s linear infinite 0s;
opacity: 0;
position: static;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
#-moz-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform-origin: 50% 50%; }
10% { opacity: 1; -moz-transform-origin: 50% 50%; }
25% { opacity: 1; -moz-transform-origin: 50% 50%; }
30% { opacity: 0; -moz-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform-origin: 50% 50%; }
10% { opacity: 1; -webkit-transform-origin: 50% 50%; }
25% { opacity: 1; -webkit-transform-origin: 50% 50%; }
30% { opacity: 0; -webkit-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform-origin: 50% 50%; }
10% { opacity: 1; -ms-transform-origin: 50% 50%; }
25% { opacity: 1; -ms-transform-origin: 50% 50%; }
30% { opacity: 0; -ms-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
<div class="slidingHorizontal">
<span>FIRST</span>
<span>SECOND</span>
<span>THIRD</span>
</div>
first is showing on left corner for me as well.
have a look here, those are both centralized in the middle of the page
see the demo: jsfiddle.net/y5L5xb6a/
Related
Good day, there was the task to make the animation of an airplane flying around a path. I decided to take advantage of the opportunities in CSS3. But all I have achieved is one animation cycle. The plane flies one circle around the path and the animation stops. I tried using animation-iteration-count with infinite, but all I got was the flight of a plane in chaotic directions. Below is my code, please tell me how to loop this animation so that the plane constantly flies in a circle without stopping.
Code
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
bottom: -13px;
left: 100%;
animation-iteration-count: 3;
animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards;
}
#keyframes flyLeft {
100% {
left: -14px;
}
}
#keyframes rotatePlane {
100% {
transform: rotateZ(90deg);
}
}
#keyframes flyUp {
100% {
bottom: 100%;
}
}
#keyframes RotateRight {
0% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(180deg);
}
}
#keyframes MoveRight {
0% {
left: -14px;
}
100% {
left: 380px;
}
}
#keyframes RotateDown {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(270deg);
}
}
#keyframes flyDown {
0% {
bottom: 100%;
}
100% {
bottom: -8%;
}
}
#keyframes RotateLeft {
0% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
You need to wrap all the animations in one #keyframes CSS at-rules to easily make repetitions. Here's a working solution below that wraps all the animations in one #keyframes.
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
animation: travelRoundTheBorder 10s linear infinite;
}
#keyframes travelRoundTheBorder {
30% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%);
}
32.5% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
47.5% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
50% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
80% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
82.5% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(270deg);
}
97.5% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(270deg);
}
100% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Splitting the movement along the path and the turns into TWO separate keyframes makes this easier.
The math of the percentages is based on a square but with a rectangle the percentages change.
CSS variable could help here to work out those percentages but I haven't gone deeper into that for the demo purposes.
.wrap {
margin: 10px;
}
.route {
height: 150px;
width: 150px;
margin: auto;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
transform: translate(-50%, -50%) rotate(180deg);
top: 0;
left: 0;
animation: path 6s linear infinite, turn 6s ease infinite;
}
#keyframes path {
0%,
100% {
left: 0;
top: 0;
}
25% {
left: 100%;
top: 0;
}
50% {
left: 100%;
top: 100%;
}
75% {
left: 0;
top: 100%;
}
}
#keyframes turn {
0%,
24% {
transform: translate(-50%, -50%) rotate(180deg);
}
25%,
49% {
transform: translate(-50%, -50%) rotate(270deg);
}
50%,
74% {
transform: translate(-50%, -50%) rotate(0deg);
}
75%,
99% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(90deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Just to begin testing new CSS posibilities, offset-path (not supported in IE, experimental in FF)
reference
#container {
width: 400px;
height: 300px;
border: dotted 5px black;
margin: 30px;
}
#motion-demo {
offset-path: path('M0 -10 H400 A 10 10 1 0 1 410 0 V300 A 10 10 1 0 1 400 310 H0 A 10 10 1 0 1 -10 300 V0');
animation: move 10s infinite linear;
width: 40px;
height: 40px;
background: cyan;
}
#keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
<div id="container">
<div id="motion-demo">A</div>
</div>
I have this problem with my CSS animation. I have an element position absolute centered in the middle of the page and when I put the animation on, it moves to the right and when the animation is finished it moves back to the middle of the page. Here's the code:
#keyframes motto
from
opacity: 0
transform: translate3d(0, -100%, 0)
to
opacity: 1
transform: none
#home
.motto
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
animation-name: motto
animation-duration: 2s
h1
margin: 0
font-size: 42px
font-weight: 100
opacity: .5
-webkit-animation-duration: 2s
Thx in advance!
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
animation-name: motto;
animation-duration: 2s;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5
-webkit-animation-duration: 2s;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
Use the following line in the CSS of .motto :
animation-fill-mode: forwards;
This sets the element to display as it is in the final frame of the animation.
#keyframes motto {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.motto {
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
animation-name: motto;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.motto h1 {
margin: 0;
font-size: 42px;
font-weight: 100;
opacity: .5;
text-align: center;
}
<div class="motto"><h1>css <span>animation</span></h1></div>
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
I'm using this fun scrolling text effect on my 404 page, but I need the (short) text to stop and just remain visible once it reaches the top of the page instead of scrolling all the way up and away. How do I make that happen with just CSS? I'd like to use as little js as possible.
I butchered the codebase a bit, but basically you want to remove infinite iteration count from the slide animations and add in its place forward (which is a fill mode). Then you want to replace the top values in the animations with top: 0%. Lastly, you want to remove the black fade on #titles:after which can be done by either removing it entirely or lowering its opacity. Still needs work, but this is the general idea (going to have to run it in "Full page" mode):
#import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html
{
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #ff6;
background-color: #000;
overflow: hidden;
}
p#start
{
position: relative;
width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
#-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
h1 sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}
#-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
#-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
#-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
#-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
#keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 10em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
pointer-events: none;
}
#titles p
{
text-align: justify;
margin: 0.8em 0;
}
#titles p.center
{
text-align: center;
}
#titles a
{
color: #ff6;
text-decoration: underline;
}
#titlecontent
{
position: absolute;
top: 100%;
width: 100%;
-webkit-animation: scroll 10s linear 4s forwards;
-moz-animation: scroll 10s linear 4s forwards;
-ms-animation: scroll 10s linear 4s forwards;
-o-animation: scroll 10s linear 4s forwards;
animation: scroll 10s linear 4s forwards;
}
/* animation */
#-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-moz-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-ms-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-o-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
<p id="start">A short time ago in a browser very, very close…</p>
<h1>STAR WARS<sub>titles in CSS3</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">ERROR 404</p>
<p class="center">Page not found</p>
</div></div>
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo