I have created this animated underline, but the bottom seems to sit still whilst everything else moves - making it look "laggy"
I created a codepen to illustrate the issue.
Do you have any idea why is this happening?
Codepen for illustration
<!DOCTYPE html>
<html>
<body>
<span class="divider-body">
<div class="divider-wave" data-text="dividerdivider"></div>
</span>
</body>
</html>
<style type="text/css">
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: relative;
top: -42px;
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: underline;
animation: animate 0.5s linear infinite;
}
#keyframes animate
{
0%
{
left: 0;
}
100%
{
left: -30px;
}
}
</style>
To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through; property and value. I changed the positioning for demonstration purpose.
.divider-body {
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 0;
position: relative;
}
.divider-wave {
width: 30%;
height: 10%;
background: white;
overflow: hidden;
}
.divider-wave:before {
content: attr(data-text);
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 4em;
text-decoration-style: wavy;
text-decoration-color: #607d8b;
text-decoration-line: line-through;
animation: animate 0.5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
100% {
left: -30px;
}
}
<div class="divider-body">
<span class="divider-wave" data-text="dividerdivider" />
</div>
I would also suggest swapping the span and div, since a span can only contain phrasing content, as described here. See a list of content categories here.
The text-decoration-style: wavy; doesn't have great support:
https://caniuse.com/#search=text%20decoration%20style%20wavy
I'd suggest doing this as a background image with background-repeat: repeat; and animate the background-position property.
Backgrounds will animate a lot smoother.
A short inspect shows that the line is moved back, which causes the problem. This happens on the left side as well, but by moving the line out of the container, it is no longer visible. The solution is simple; the width of the container should be the length of the line minus the moving distance of the line.
width: 1130px;
Visual: https://codepen.io/Toeffe3/pen/MWYqJyz
Related
I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.
I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.
Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.
I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.
html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>
So how could I make it become smooth ?
This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it
I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.
html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>
Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 2 years ago.
First of all, I'm talking of background and not background-color. I looked around on stack-overflow but this solution but this is for images. Though I won't prefer creating an image of gradient and using this method. It might just blur up the original image as the image size would be variable.
The fade effect I want works with background-color but there seems no way to use linear-gradient in background color.
Here is my code:
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation-name: div-text-hover;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes div-text-hover {
0% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
100% {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
}
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
When I hover my mouse on the DIV it should change the background to the above gradient with FADE effect.
But when I hover, the background changes instantly like this:
I want that background to fade-in slowly and not so sharply with pure CSS without Jquery or anything else. Just like when we use background-color
. I found no way to do this with background.
EDIT: I tried out adding #keyframes every 10% and it's still sharply changes opacity every frame. And it's not efficient to type of the same lines 60 times to get 60fps :-(
For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
position: relative;
z-index: 1;
overflow: hidden;
}
#div-text::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s ease;
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
opacity: 0;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
position: relative;
z-index: 3;
}
#div-text:hover::after{
opacity: 1;
}
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
I think, it will be helpful for you.
I am sure This will help You.I just changed the keyframe and place that linear-gradiant in hover section.
#keyframes div-text-hover {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);
background-size: 400% 400%;
-webkit-animation: div-text-hover 2s ease infinite;
animation: div-text-hover 2s ease infinite;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id="div-text">
<button id="button-text" class="cl-button">Text Here</button>
</div>
</body>
</html>
I also ran into same problem a while ago, and didn't get an answer. Turns out it is because background's linear gradient property is not animatable, just like background-img. There are some workarounds though:
Stack 2 gradients on top of each other and animate the opacity of the top one. This is given in detail here : https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
What I used is that create a gradient that is 2 times the width of screen and animate the position of the gradient.
I think in your code, the animation is working but your both the linear gradients have same values of color, hence you cant see it working. In short it is like changing gradient from white to white, which is working but there is no visual change.
Instead you can try this :-
#div-text {
display: flex;
flex-direction: row;
width: 80%;
height: 80%;
border-radius: 20px;
background: #2d2e31;
}
.cl-button {
font-family: 'Merienda One', monospace;
order: 2;
align-self: center;
height: 80%;
width: 60%;
border: 0;
background-color: transparent;
color: aliceblue;
font-size: 16px;
margin-left: 10px;
text-align: left;
}
#div-text:hover {
animation: hover-animation 2s infinite ease-in;
}
#keyframes hover-animation{
0%{
background: #2d2e31;
}
100%{
background: linear-gradient(45deg,#36D8FF, #00acee, #66757f);
}
}
I too am a beginer so this is not a perfect code. So you might want to make changes to it.
And sorry if i have made any mistake.Let me know how it works out.
Thank you.
Creating a fixed marquee block at bottom of screen. However, once object becomes fixed, the background color (#ffffff) dissapears. I've tried adding it to several different places with no luck. What am I missing here?
See the site in action here:
http://www.rauques.com/
This section is for global (allows fixed item to override wordpress theme).
/* This is what makes our section fixed */
.fixed-section {
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
mix-blend-mode: multiply;
display: block;
}
/* This makes our fixed elements clickable */
.fixed-section .column-content {
pointer-events: auto !important;
}
The following is the HTML/CSS for fixed marquee:
<html>
<head>
<style>
.marquee {
height: 40px;
width: 100% ;
display: block;
background-color: #ffffff !important;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 50px;
background-color: #ffffff !important;
position: absolute;
overflow: hidden;
animation: marquee 8s linear infinite;
display: block;
}
.marquee span {
float: left;
width: 50%;
color: #000000;
background-color: #ffffff !important;
}
hr.style1 {
display: block;
margin-top: 0em;
margin-bottom: 0em;
}
hr.style2 {
display: block;
margin-top: 10px;
margin-bottom: 0em;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
</style>
</head>
<body>
<hr class="style1">
<div class="marquee">
<div>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span>
<span><H4>Faire un don à l'Accueil Bonneau</H4></span><br>
</div>
</div>
<hr class="style2">
</body>
</html>
The problem is caused by the property mix-blend-mode: multiply; on the .fixed-section class, change it to normal.
Hey Anjela If I got your issue right, this issue is located a bit above your current markup, on the section tag for the fixed element, the property mix-blend-mode is what is causing the issue.
You can read more about the property here so you can understand better how it works and why it easily to make it conflict with other properties if not applied correctly or if you are not careful to take into account the inheritance of the CSS cascade.
Let me know if this help you, good luck!
I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples, and translate being based on percentage/pixels etc...
The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the margin value.
Can anybody think of a way in which I can use scale, and also maintain the alignment?
Update
I want to avoid inverse/reverse scaling at all costs as it renders badly in the browser in most cases. With that in mind, I don't think this is actually possible but will leave the question open in case anyone is aware of some CSS magic.
See the following snippet as an example:
.tile {
position: relative;
width: 500px;
height: 100px;
padding: 40px;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
color: white;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
Try scaling .tile itself and reverse-scaling its children:
.tile {
position: relative;
width: 500px;
padding: 40px;
background: #000;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>* {
color: white;
transition: transform .3s ease-out;
}
.tile>.button {
position: absolute;
right: 0;
top: 0;
background: red;
padding: 10px 15px;
color: white;
transform-origin: 100% 0;
}
.tile:hover {
transform: scale(.9);
}
.tile:hover>* {
transform: scale(1.1);
}
<div class="tile">
<section>
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
</section>
<div class="button">Align Me</div>
</div>
Another idea is animating top and right of .button:
html,
body {
width: 75%;
margin: 0;
padding: 0
}
* {
box-sizing: border-box
}
.tile {
position: relative;
width: 100%;
padding: 40px;
color: white;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>.button {
position: absolute;
right: 0;
top: 0;
background: red;
padding: 10px 15px;
color: white;
transition: .3s ease-out;
}
.tile:hover>.button {
top: 5%;
right: 5%
}
<div class="tile">
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
<div class="button">Align Me</div>
</div>
The next idea is using a bit more complex code, but doing animation of transform property only:
html,
body {
width: 75%;
}
* {
box-sizing: border-box
}
.tile {
position: relative;
width: 100%;
padding: 40px;
color: white;
}
.tile:hover:before {
transform: scale(.9);
}
.tile:before,
.tile>.button {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width:100%; height:100%;
background: #000;
transition: transform .3s ease-out;
}
h1 {
text-align: center;
}
.tile>.button {
z-index: 1;
display: flex;
align-items: flex-start;
margin: 0 -100% -100% 0;
background: transparent;
transition: .3s ease-out;
pointer-events: none;
}
.tile>.button div {
padding: 10px 15px;
background: red;
cursor: pointer;
pointer-events: all;
}
.tile>.button:before {
content: '';
flex: 1 0;
}
.tile:hover>.button {
transform: translate3d(-5%, 5%, 0);
}
<div class="tile">
<h1>Hello World</h1>
<p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
<div class="button">
<div>Align Me</div>
</div>
</div>
If you are scaling by p then you are reducing the size and the new width will become width*(1 - p). Same logic for the height. You can consider the use of calc() and easily define the translate using this formula.
We divide by 2 because we reduce from both side and we will translate from 1 side
.tile {
position: relative;
width: 540px;
height: 200px;
display:flex;
align-items:center;
justify-content:center;
}
.tile:hover:before {
transform: scale(0.9);
}
.tile:hover .button{
transform: translate(calc(-540px*0.1/2),calc(200px*0.1/2));
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s;
}
h1 {
text-align: center;
color: white;
margin:0;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
transition: transform .3s ;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
You can consider CSS variables to easily change the scale value:
.tile {
position: relative;
width: 540px;
height: 200px;
display:flex;
align-items:center;
justify-content:center;
--s:0.9;
}
.tile:hover:before {
transform: scale(var(--s));
}
.tile:hover .button{
transform: translate(calc(-540px*(1 - var(--s))/2),calc(200px*(1 - var(--s))/2));
}
.tile:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: -1;
transition: transform .3s;
}
h1 {
text-align: center;
color: white;
margin:0;
}
.tile > .button {
position: absolute;
right: 0;
top: 0;
display: inline-block;
background: red;
padding: 10px 15px;
color: white;
transition: transform .3s ;
}
<div class="tile">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
<div class="tile" style="--s:0.5">
<h1>Hello World</h1>
<div class="button">Align Me</div>
</div>
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>