How to create a rotating text on Squarespace
**You can also check out our premium typing carousel effect plugin**
**You can also check out our premium random letter effect plugin**
This tutorial will show you how to create a rotating text similar to what is shown below. There may be instances where you may want to animate some text on your Squarespace. The following CSS snipnet code can help animate text and it works for Squarespace 7.0 and 7.1
Complexity: Easy
Use the following code snippet below.
The four seasons
Winter.
Spring.
Summer.
Autumn.
Add the text in the following format in a code block
<h2>The four seasons
<div class="fadeIn">
<span>Winter.</span>
<span>Spring.</span>
<span>Summer.</span>
<span>Autumn.</span>
</div>
</h2>Then add the following CSS.
/*FadeIn*/
.fadeIn{
display: inline;
text-indent: 8px;
}
.fadeIn span{
animation: fadeEffect 10.5s linear infinite 0s;
-ms-animation: fadeEffect 10.5s linear infinite 0s;
-webkit-animation: fadeEffect 10.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.fadeIn span:nth-child(2){
color: #E71010;
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
color: #04FF33;
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
color: #F604FF;
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.
All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
