Pure CSS animation on single letter, slide & bounce

Developer
Robert Borghesi
Size
3,228 Kb
Views
72,864
  1. Pure CSS animation on single letter, slide & bounce Previews
  2. Pure CSS animation on single letter, slide & bounce HTML Codes
  3. Pure CSS animation on single letter, slide & bounce CSS Codes

How do I make an pure css animation on single letter, slide & bounce?

Pure CSS animation, using keyframes and scss cycles (@for). Black & White using text-shadow and using text-stroke. What is a pure css animation on single letter, slide & bounce? How do you make a pure css animation on single letter, slide & bounce? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Pure CSS animation on single letter, slide & bounce Previews
IQ Test

Pure CSS animation on single letter, slide & bounce - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS animation on single letter, slide & bounce </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="c letter">C</div> <div class="o letter">O</div> <div class="d letter">D</div> <div class="e letter">E</div> <div class="p letter">P</div> <div class="e letter">E</div> <div class="n letter">N</div>
</div>
</body>
</html>

Pure CSS animation on single letter, slide & bounce - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
body { width: 100%; height: 100%; text-align: center; background: #F2EDF0;
}
.container { overflow: hidden; height: 130px; padding-top: 30px; display: inline-block; position: relative; top: 150px;
}
.letter { display: inline-block; font-family: 'Varela Round', sans-serif; font-size: 140px; color: #282828; -webkit-text-stroke: 5px #282828; position: relative; z-index: 1; top: 0px; line-height: 120px; top: 0px; margin-right: -10px; -webkit-transform: translate3d(0, 130px, 0); -moz-transform: translate3d(0, 130px, 0); -ms-transform: translate3d(0, 130px, 0); transform: translate3d(0, 130px, 0);
}
.c:after { content: "C"; font-size: 140px;
}
.d:after { content: "D"; font-size: 140px;
}
.o:after { content: "O"; font-size: 140px;
}
.d:after { content: "D"; font-size: 140px;
}
.e:after { content: "E"; font-size: 140px;
}
.p:after { content: "P"; font-size: 140px;
}
.n:after { content: "N"; font-size: 140px;
}
.c:after, .o:after, .d:after, .e:after, .p:after, .n:after { position: absolute; left: 0; top: 0px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transition: all 1s; color: white; -webkit-text-stroke: 5px #282828; opacity: 1; z-index: 100;
}
.letter:nth-child(1) { animation-delay: 1.1s; -webkit-animation-delay: 1.1s;
}
.letter:nth-child(1):after { animation-delay: 2.7s; -webkit-animation-delay: 2.7s;
}
.letter:nth-child(2) { animation-delay: 1.2s; -webkit-animation-delay: 1.2s;
}
.letter:nth-child(2):after { animation-delay: 2.9s; -webkit-animation-delay: 2.9s;
}
.letter:nth-child(3) { animation-delay: 1.3s; -webkit-animation-delay: 1.3s;
}
.letter:nth-child(3):after { animation-delay: 3.1s; -webkit-animation-delay: 3.1s;
}
.letter:nth-child(4) { animation-delay: 1.4s; -webkit-animation-delay: 1.4s;
}
.letter:nth-child(4):after { animation-delay: 3.3s; -webkit-animation-delay: 3.3s;
}
.letter:nth-child(5) { animation-delay: 1.5s; -webkit-animation-delay: 1.5s;
}
.letter:nth-child(5):after { animation-delay: 3.5s; -webkit-animation-delay: 3.5s;
}
.letter:nth-child(6) { animation-delay: 1.6s; -webkit-animation-delay: 1.6s;
}
.letter:nth-child(6):after { animation-delay: 3.7s; -webkit-animation-delay: 3.7s;
}
.letter:nth-child(7) { animation-delay: 1.7s; -webkit-animation-delay: 1.7s;
}
.letter:nth-child(7):after { animation-delay: 3.9s; -webkit-animation-delay: 3.9s;
}
.letter { -webkit-animation: show 0.3s 4s 1 ease-out forwards; -moz-animation: show 0.3s 4s 1 ease-out forwards; -o-animation: show 0.3s 4s 1 ease-out forwards; animation: show 0.3s 4s 1 ease-out forwards;
}
.letter:after { -webkit-animation: up 1s 1 ease-out forwards; -moz-animation: up 1s 1 ease-out forwards; -o-animation: up 1s 1 ease-out forwards; animation: up 1s 1 ease-out forwards;
}
@keyframes show { 100% { -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
}
@keyframes up { 30% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 60% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } 80% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
}
@-webkit-keyframes show { 100% { -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
}
@-webkit-keyframes up { 30% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 60% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } 80% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
}
Pure CSS animation on single letter, slide & bounce - Script Codes
Pure CSS animation on single letter, slide & bounce - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 3
Size 3,228 Kb
Views 72,864
Do you need developer help for Pure CSS animation on single letter, slide & bounce?

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!

Robert Borghesi (dghez) Script Codes
Name
Fullscreen slice hero slider
Text-mask background moving on MouseMove - v2
Continuous register clean form with autoresize input
Opening with auto typing responsive sentences with random background color loop
Gradient border on hover - Scorer of fifa world cup
Continuous scrolling background of sticky header
Hover otating cards folder of OnePiece characters
Enel brand - logo animation with tweenmax
Anaglyph 3D with CSS-blend on mouseMove
Animated title moving on scroll
Create amazing art & images 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!