I have a set of spans that form a word, where each span represents a single letter.I'd like to translate them off the screen and then add each span with a delay so that they appear one by one.
Now, I know transform would only work with block display on spans, but how do I keep them in one line, so that they still make up a word?
Alternatively, what is the best markup for an animation exactly like that - a word where I can manipulate each letter independently?
Thank you! :)
I used "css animation" to solve this problem. I also used a wrapper "div" element to position "the word" correctly. other comments added in the code.
.container {
width: 75vw;
margin: 20px auto;
background-color: #d0d5d7;
height: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
overflow: hidden; /* this is necessary to hide words for the first view */
}
.container div {
/* this div is used to align letters in a good position relative to ".container" */
position: relative;
background-color: #014dd0;
width: 160px;
}
.container span {
display: inline-block;
width: 32px;
text-align: center;
font-size: 40px;
position: absolute;
top: 50px;
-webkit-animation-name: transAni;
animation-name: transAni;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/* animation-iteration-count: 2;*/
-webkit-animation-duration: 1s;
animation-duration: 1s; /* change this amount to animate faster or slower */
}
.container div span:nth-child(1){
-webkit-animation-delay: 10ms;
animation-delay: 10ms;
left: 0%;
color: #5daa20;
}
.container div span:nth-child(2){
-webkit-animation-delay: 1010ms;
animation-delay: 1010ms; /* add delays according to "animation duration" */
left: 20%;
color: #c0c0d5;
}
.container div span:nth-child(3){
-webkit-animation-delay: 2010ms;
animation-delay: 2010ms;
left: 40%;
color: #125ca0;
}
.container div span:nth-child(4){
-webkit-animation-delay: 3010ms;
animation-delay: 3010ms;
left: 60%;
color: #7e50df;
}
.container div span:nth-child(5){
-webkit-animation-delay: 4010ms;
animation-delay: 4010ms;
left: 80%;
color: #781208;
}
#-webkit-keyframes transAni {
0% {
top: 50px;
}
100% {
top: -20px;
}
}
#keyframes transAni {
0% {
top: 50px;
}
100% {
top: -20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>transform spans</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div>
<span>w</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
</div>
</div>
</body>
</html>
as you could see you are able to add "custom styles" to each span. like changing the color of each one.
You could use inline-block and have the letters in a word wrapper which has overflow hidden so you don't have to translate the letters completely off screen
var toggleAnimation = function() {
document.querySelector('.word').classList.toggle('start');
}
.word {
font-size: 0; /* to remove the uneeded white spaces between the letters */
overflow: hidden;
}
span {
display: inline-block;
font-size: 3rem;
transform: translateX(-400px);
transition: all;
}
span:nth-child(1) { transition-duration: .5s }
span:nth-child(2) { transition-duration: .7s }
span:nth-child(3) { transition-duration: .9s }
span:nth-child(4) { transition-duration: 1.1s }
span:nth-child(5) { transition-duration: 1.3s }
.word.start span {
transform: translateX(0);
}
<div class="word">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>
<button onClick="toggleAnimation()">Toggle animation</button>
Related
So with the possibilities of HTML marquee, I came super close to what I want to create.
.marquee {
background-color: antiquewhite;
width: 150px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.marquee span {
font-size: 40px;
position: relative;
left: 100%;
animation: marquee 2s linear infinite;
}
.marquee:hover span {
animation-play-state: paused;
}
.marquee span:nth-child(1) {
animation-delay: 0s;
}
.marquee span:nth-child(2) {
animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
animation-delay: 3.2s;
}
#keyframes marquee {
0% {left: 100%;}
100% {left: -100%;}
}
p{
display: inline;
}
<p class="marquee">
<span>this is a</span>
<span>simple marquee</span>
<span>using css</span>
<span>using css</span>
<span>simple marquee</span>
</p>
The only 2 problems:
I don't know how to change the height so that the text will stay in the middle
The words overlap and I can't create a clean loop of the words
UPDATE:
I assume I made it. If anything inside this code is a no-go, please let me know.
If not, this will be a possible CSS only solution for anybody who wants to achieve something similar:
HTML:
<div class="marqueemagic">
<div class="scrollingquee">
</div><div class="scrollingquee" aria-hidden="true">
<i> CONVERSION | OPTIMIZATION |</i>
</div><div class="scrollingquee" aria-hidden="true">
<i>CONVERSION | OPTIMIZATION |</i>
</div><div class="scrollingquee" aria-hidden="true">
<i> CONVERSION | OPTIMIZATION |</i>
</div>
<!-- … -->
</div>
CSS:
.marqueemagic {
overflow: hidden;
white-space: nowrap;
width: 150px;
background-color: white;
display: inline-block;
padding-bottom: 5px;
padding-top: 5px;
margin-bottom: 2px;
font-size: 35px;
vertical-align: bottom;
font-weight: 600;
}
.scrollingquee {
animation: marquee 5s linear infinite;
display: inline-block;
padding-right: 10px;
}
#keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
Result:
https://youtu.be/Tuy4FUZmVd8
Of course, you can change speed, width, background color, opacity, font related values etc. as you wish without breaking anything.
With kind regards
Chris
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
Can someone please review the following block of code and tell me why the animation on the image div and info div are not working.
this is the html file for the about page. (i had enclosed the block content in a div and given it position relative)
{%extends 'layout.html' %}
{%block content %}
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
Try adding:
#image { position:absolute; }
If you are using Firefox, open the dev tools, locate the div image, and see the styles info.
You will see something like this
Notice that left is grayed. Now, hover on the "i" circle. You will see a message stating "left has no effect because the element is not positioned".
So, this is your problem
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
Good day. The animation was done on a clean CSS (I understand that i can use the "request animation frame", but I can’t use it). Faced such a problem that the animation works well only in the desktop browser. "Animation-delay" does not work on mobile devices. How can I implement this animation on a clean CSS?
SCSS:
.initial-loader {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background: #65B200;
&_disabled {
display: none;
}
&__wrapper {
height: 0%;
width: auto;
display: flex;
justify-content: center;
}
&__loader {
width: 60px;
height: 8px;
align-self: flex-end;
display: flex;
justify-content: space-around;
}
&__loader span {
height: 8px;
width: 8px;
background-color: white;
border-radius: 100%;
}
&__loader :nth-child(1) {
animation: anime 0.5s infinite ease-in-out alternate;
}
&__loader :nth-child(2) {
animation: anime 0.5s infinite ease-in-out alternate;
-moz-animation-delay: 120ms;
-webkit-animation-delay: 120ms;
-o-animation-delay: 120ms;
animation-delay: 120ms;
}
&__loader :nth-child(3) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 240ms;
}
&__loader :nth-child(4) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 360ms;
}
&__loader :nth-child(5) {
animation: anime 0.5s infinite ease-in-out alternate;
animation-delay: 480ms;
}
#keyframes anime {
from {
transform: scale(1)
}
to {
transform: scale(0.2)
}
}
HTML:
<div class="initial-loader">
<div class="initial-loader__wrapper">
<div class="initial-loader__loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
Here my code:
https://codepen.io/koofem/pen/MWYoYxE
How does it works in the desktop browser
How does it works on mobile
Mobile devices has webkit browsers, if the same CSS is working on desktops and not on Mobile Devices, then make sure your css has prefixes for all different browsers and devices.
You have had done it for :nth-child(2) but not for all other selected elements and classes.
Best shortcut is to goto CSS Autiprefixer and give it a shot by copy pasting your CSS and try to test on mobile device again (Obviously after clearing cache of the Mobile Device's Browser)
I am trying to change the size of the text when Hover over the word Internet, without changing any of its other properties. When over over the word I am trying to decrease the size of the word
Here is my code that I tried to achieve this functionality
h1:hover::before,
h1:hover::after {
width: 100%;
}
h1::before {
top: 0;
left: 0;
}
h1::after {
top: 100%;
right: 0;
}
#text:hover{
color:white;
-webkit-transform: scale(1.2);
}
<body>
<div class="text-wrapper">
<h1 id='text'>
Hot</h1>
</div>
</body>
Like the comments suggested, you need to add a transition to the h1 css:
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
// Set transition...
transition: transform .7s ease;
}
And set a low scale transform:
#text:hover {
color: white;
// Scale transform...
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Fiddle around with the scale setting and the transition duration to adjust size of the text and the speed of transition respectively.
Edit:
If I have understood your comment correctly, you want the on hover lines to animate its width and then "disappear" - we can just reverse the animation from full width to nothing for that. For this you need to use the animation attribute along with #keyframes.
I have changed the lines the other way round so the top line goes from right to left and bottom line from left to right as per your comment, by changing the h1::before left attribute to right:0; and vice-versa for the h1::after.
Then you need to specify the animation on the hover rule:
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
For more information on the animation attributes: w3schools and Mozilla docs.
And specify the animation itself via #keyframes:
#keyframes slide {
from {width:0%}
to {width:100%}
}
Info on the #keyframes: Mozilla docs
body {
Background: #7a86cb;
text-align: center;
}
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
transition: transform .7s ease;
}
h1::before,
h1::after {
content: "";
position: absolute;
height: 2px;
background: #6849e3;
}
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
h1::before {
top: 0;
right: 0;
}
h1::after {
top: 100%;
left: 0;
}
#text:hover{
color:white;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
#keyframes slide {
from {width:0%}
to {width:100%}
}
<body>
<div class="text-wrapper">
<h1 id='text'>
INTERNET </h1>
</div>
</body>