CODEWITHSUNDEEP
css
black bamba
black bamba

Reputation: 57

interval reduce the font-size of text in CSS

My problem is that i want to reduce the font size by 10% every 2 seconds 

<div class="reduce"> text </div>

.reduce{
transition: 2s linear all;
font-size : 20px;
}

how can I do it with css only?

Upvotes: 0

Views: 398

Answers (2)

lukbl
lukbl

Reputation: 1773

One way you could do it is by css animations:

div {

    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 15s;
    animation-fill-mode: forwards;/*leaves properties at values from the end of animation*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {font-size: 20px;}
    100% {font-size: 0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {font-size: 20px;}
    100% {font-size: 0px;}
}
<div>text</div>

Font size changes linearly. In case you want those changes to occur in different steps you could set them to some specific values:

@keyframes example {
    0%   {font-size: 20px;}
    10%   {font-size: 18px;}
    20%  {font-size: 17px;}
   30%   {font-size: 16px;}
/* etc...*/
}

Hope it helps

Upvotes: 1

d_z90
d_z90

Reputation: 1263

I know you asked for a css only solution, but with a few lines of jquery you can make it work. You have to set an interval and use two different functions to change font-size after a certain amount of time.

var textuptimer = setInterval(textup, 1000);
function textup() {
    $(".heart").css("font-size", "1em");
}

var textdowntimer = setInterval(textdown, 2000);
function textdown() {
    $(".heart").css("font-size", "0.8em");
}

Here is a working fiddle.

Upvotes: 0

Related Questions