How to reduce specific text size in text animation? - html

Question

I have created a text sliding animation that has a fixed text (SM) and two 'LI's that will slide and replace eachother (ART and allART). What I need is for "all" from SMallART to be in a smaller size.
body {
width: 50%;
height: 50%;
position: fixed;
background-color: #F2F2F2;
}
.content {
width: 537px;
font-size: 62px;
line-height: 80px;
font-family: 'Muli';
color: #FE642E;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: 130px;
}
.visible {
float: left;
font-weight: 800;
overflow: hidden;
height: 80px;
}
p {
display: inline;
float: left;
margin: 0;
}
ul {
margin-top: 0;
padding-left: 101px;
text-align: left;
list-style: none;
animation: 6s linear 0s normal none infinite change;
-webkit-animation: 6s linear 0s normal none infinite change;
-moz-animation: 6s linear 0s normal none infinite change;
-o-animation: 6s linear 0s normal none infinite change;
}
ul li {
line-height: 80px;
margin: 0;
}
#-webkit-keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
35% {
margin-top: -60px;
}
45% {
margin-top: -80px;
}
55% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -60px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
#keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
35% {
margin-top: -60px;
}
45% {
margin-top: -80px;
}
55% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -60px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<div class="content">
<div class="visible">
<p>
SM
</p>
<ul>
<li>ART</li>
<li>allART</li>
</ul>
</div>
</div>
So,how to reduce only the "all"text size.

Answer 1

Try defining a parent div ( for the general paragraph styling ), and a child div ( for a specific paragraph styling), and you can achieve your desired functionality, try this:
HTML
<div class="big-text">sm<div class="small-text">all</div>art</div>
CSS
.full-text {
display:inline;
font-size:22px;
}
.small-text {
display:inline;
font-size:10px;
}
The Jsfiddle:
Differnet Sizes