css text swap effect code example
Example 1: javascript when button clicked different text appears
function show() {
var box = document.getElementById('box');
var displaySetting = myClock.style.display;
var showButton = document.getElementById('showButton');
if (displaySetting == 'block') {
myClock.style.display = 'none';
clockButton.innerHTML = 'Show box';
}
else {
myClock.style.display = 'block';
clockButton.innerHTML = 'Hide box';
}
}
Example 2: text change animation css
h1:before{
content: 'Original Text';
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; content: "Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; content: "Original Text"}
}