I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition. Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
I’m wondering if it’s possible to have the text content of a div increase and decrease in font size repeatedly every second. This would give an effect where the text seems to move closer to the viewer before moving back, ideally it would be a smooth transition and wouldn’t look like a 2 frame gif.
This is my attempt using Javascript to change the font size every second:
<div id="textdiv">ZOOM</div>
<script>
function zoomtext(){
var textdiv = document.getElementById("textdiv");
textdiv.style.fontSize = "20px";
textdiv.style.fontSize = "25px";
setTimeout(zoomtext, 1000);
}
</script>
This isn’t working, and I’m not sure that this code would result in a smooth transition. Perhaps it’s possible to make a smooth transition by changing the font by tenths of a pixel (for example: 20px, 20.1px, 20.2px …and so on until 25px, and then decreasing it back to 20px in the same way).
I’m worried that method might result in a Javascript function running constantly, which might slow down my page.
Is there a better way to get this effect?
Share Improve this question asked Feb 24, 2016 at 16:41 EmilyEmily 1,1515 gold badges21 silver badges43 bronze badges 1- is it suppose to push things down every time it increase, or do you only want the zoom effect without having container to grow with the text ? – G-Cyrillus Commented Feb 24, 2016 at 17:17
5 Answers
Reset to default 8Use CSS transitions with scale transformation. Font-size transitions are never smooth, and transitions on transform
are cheap.
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.5);
}
Repetition can be acplished through CSS3 animations:
.grow {
width: 100px;
text-align: center;
animation: grow-animation 2s linear infinite;
}
@keyframes grow-animation {
0% { transform: scale(1); }
50% {transform: scale(2); }
100% {transform: scale(1); }
}
You can achieve the same effect using CSS Animations. It's pretty easy, too, and far better than using Javascript for that.
You need to assign your element the animation
property, which you then define.
#textdiv {
animation: textgrowth 1s infinite alternate;
}
@keyframes textgrowth {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
Be sure to add alternate
at the end of your CSS rule to make the animation go back and forth.
if it is only zoom at screen , and not growing the container too, then scale(); should be what you look for:
#textdiv {
-webkit-animation: zoom1-2 infinite 1s;
animation: zoom1-2 infinite 1s;
-webkit-transform-origin:0 0 ;
transform-origin:0 0 ;
font-size:20px;
}
@-webkit-keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes zoom1-2 {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
<div id="textdiv">ZOOM</div>
<div>don't push me</div>
Instead of javascript you could use CSS animations.
Some example HTML:
<!DOCTYPE html>
<head>
<title>keyframes text size animation test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p id="textdiv">ZOOM</p>
</body>
</html>
And the CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#textdiv {
-webkit-animation: adjustText 1s infinite alternate;
-moz-animation: adjustText 1s infinite alternate;
-o-animation: adjustText 1s infinite alternate;
animation: adjustText 1s infinite alternate;
}
@keyframes adjustText {
from {
font-size: 20px;
}
to {
font-size: 25px;
}
}
Here's a working codepen of this example
Try this one:
function zoomtext(){
var textdiv = document.getElementById("textdiv");
var fontSize = textdiv.style.fontSize;
if (fontSize !== '48px') {
textdiv.style.fontSize = '48px';
}
else {
textdiv.style.fontSize = '21px';
}
setTimeout(zoomtext, 1000);
}
zoomtext();
<div id="textdiv">ZOOM</div>