Simple CSS3 Text animation

Developer
KONSTANTIN TRUNOV
Size
3,556 Kb
Views
14,168
  1. Simple CSS3 Text animation Previews
  2. Simple CSS3 Text animation HTML Codes
  3. Simple CSS3 Text animation CSS Codes
  4. Simple CSS3 Text animation JS Codes

How do I make an simple css3 text animation?

Simple text animation with beautiful hover effect after animation. What is a simple css3 text animation? How do you make a simple css3 text animation? This script and codes were developed by KONSTANTIN TRUNOV on 26 November 2022, Saturday.

Simple CSS3 Text animation Previews
IQ Test

Simple CSS3 Text animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS3 Text animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="animation-container"> <div class="round"> <div class="mask"></div> <div class="photo"></div> </div> <div class="name"> <a href="https://vk.com/truman55" target="_blank" title="Contact me"> <span class="letter">K</span> <span class="letter">O</span> <span class="letter">N</span> <span class="letter">S</span> <span class="letter">T</span> <span class="letter">A</span> <span class="letter">N</span> <span class="letter">T</span> <span class="letter">I</span> <span class="letter">N</span> </a> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple CSS3 Text animation - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Coiny');
body { background: #00CACA; font-family: 'Coiny', cursive;
}
.wrapper { margin: 0 auto; width: 1170px;
}
.animation-container { display: flex; height: 100vh; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
}
.animation-container .name span::after { content: ""; display: block; position: absolute; width: 100%; height: 0px; background: #fff; transition: height 0.2s ease-in-out;
}
.animation-container .hover span:hover { color: #00caca;
}
.animation-container .hover span:hover::after { height: 5px;
}
.round { width: 350px; height: 350px; border: 5px solid #fff; border-radius: 50%; position: relative; overflow: hidden; z-index: 99; box-shadow: 1px 1px 2px #000;
}
.photo { display: block; background: url('https://pp.vk.me/c626324/v626324815/73f2/lADIiDyeEdE.jpg') no-repeat; background-size: cover; width: 100%; height: 100%; opacity: 0; animation: bg 1s ease-in-out; animation-delay: 5s; animation-fill-mode: forwards; border-radius: 50%;
}
.mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0; z-index: 1; animation: mask 1s ease-in-out; animation-delay: 5s; animation-fill-mode: forwards;
}
.name { font-size: 2em; animation: scale 0.5s ease-in-out; animation-delay: 5s; position: absolute; z-index: 999;
}
.name a { text-decoration: none; color: #fff;
}
.name a span { transition: color 0.2s ease-in-out; opacity: 0; display: inline-block;
}
.name span:nth-of-type(1) { animation: letter 0.5s ease-in-out; animation-fill-mode: forwards;
}
.name span:nth-of-type(2) { animation: letter 0.5s ease-in-out; animation-delay: .5s; animation-fill-mode: forwards;
}
.name span:nth-of-type(3) { animation: letter 0.5s ease-in-out; animation-delay: 1s; animation-fill-mode: forwards;
}
.name span:nth-of-type(4) { animation: letter 0.5s ease-in-out; animation-delay: 1.5s; animation-fill-mode: forwards;
}
.name span:nth-of-type(5) { animation: letter 0.5s ease-in-out; animation-delay: 2s; animation-fill-mode: forwards;
}
.name span:nth-of-type(6) { animation: letter 0.5s ease-in-out; animation-delay: 2.5s; animation-fill-mode: forwards;
}
.name span:nth-of-type(7) { animation: letter 0.5s ease-in-out; animation-delay: 3s; animation-fill-mode: forwards;
}
.name span:nth-of-type(8) { animation: letter 0.5s ease-in-out; animation-delay: 3.5s; animation-fill-mode: forwards;
}
.name span:nth-of-type(9) { animation: letter 0.5s ease-in-out; animation-delay: 4s; animation-fill-mode: forwards;
}
.name span:nth-of-type(10) { animation: letter 0.5s ease-in-out; animation-delay: 4.5s; animation-fill-mode: forwards;
}
@keyframes letter { from { opacity: 0; transform: scale(1); } 50% { transform: scale(1.5); } to { opacity: 1; transform: scale(1); }
}
@keyframes scale { 50% { transform: scale(1.1); } to { transform: scale(1); }
}
@keyframes bg { to { opacity: 1; }
}
@keyframes mask { to { opacity: 0.3; }
}

Simple CSS3 Text animation - Script Codes JS Codes

setTimeout(function() { $('.name').addClass('hover');
}, 5000);
Simple CSS3 Text animation - Script Codes
Simple CSS3 Text animation - Script Codes
Home Page Home
Developer KONSTANTIN TRUNOV
Username truman55
Uploaded November 26, 2022
Rating 3
Size 3,556 Kb
Views 14,168
Do you need developer help for Simple CSS3 Text animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KONSTANTIN TRUNOV (truman55) Script Codes
Name
HAMBURGER ANIMATION
Range-filter
Cutting the image into 2 parts when hovering the mouse
Random colored balls
Css animation - FIFA
Background effect for text
A Pen by KONSTANTIN TRUNOV
Flag russia linear-gradient
Balloons SVG
Neon clock
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!