I'm just playing around with animation in css.
This is the code that i'm writing...
The html:
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>
And the css:
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
#keyframes playthis {
0% {
width: 100%;
}
50% {
width: 400%;
}
100% {
width: 100%;
}
}
So is just a simple animation, but i'm trying to figure it out how I could achieve a certain effect and that is: when the box reaches 400% width, let the right border remain fixed in that position and then return to its original size... as if the right border drags the left to itself...
I hope i was clear!
This is a possible solution using margin-left.
:root{
--maxWidth: 200%;
--finalWidth: 100%;
}
.wrapper {
display: grid;
width: fit-content;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
position: relative;
}
.wrapper>div {
background: linear-gradient(to bottom right, crimson, yellow);
border: 5px solid #555;
border-radius: 5px;
width: 150px;
height: 150px;
}
.item-6 {
animation-name: playthis;
animation-duration: 5s;
animation-fill-mode: both;
animation-iteration-count: initial;
}
#keyframes playthis {
0% {
width: var(--finalWidth);
}
50% {
width: var(--maxWidth);
margin-left: 0%
}
100% {
width: var(--finalWidth);
margin-left: calc(var(--maxWidth) - var(--finalWidth));
}
}
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
</div>
The margin-left value in the last key frames can be calculated using the width of your object like this:
maxWidth - finalWidth
Where maxWidth is the width at 50% of your animation and finalWidth the width at the end of your animation. To simplify the use of the code, I used css variables and calculate the final margin-left
Related
i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
This question already has an answer here:
Text blended over background color
(1 answer)
Closed 1 year ago.
how can I change the color of the text when using mix-blend-mode in CSS ?
Here is the code: https://jsfiddle.net/1nyah2zf/
What I have:
What I want:
Thanks !
code
I do not think mix-blend-mode would be what you need here :
From your example you could do it otherwise with background attachement :
example of the idea:
body {
margin: 0;
display: flex;
}
.left {
width: 200px;
height: 200px;
background: green;
}
.right {
width: 200px;
height: 200px;
background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
background-size: 200px;
}
.text {
position: absolute;
left: 100px;
top: 70px;
font-size: 50px;
animation-name: animation;
animation-duration: 2s;
animation-delay: 0s;
animation-iteration-count: infinite;
background: linear-gradient(90deg, black 200px, white 200px) fixed;
color: transparent;
background-clip: text;
}
#keyframes animation {
0% {
left: 100px;
}
50% {
left: 140px;
}
100% {
left: 100px;
}
}
<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO!</div>
without background-attachement, then move the text only
If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
A div with padding can't be made smaller than its padding will allow.
Is this expected behaviour? If so, how can we deal with it?
div {
display: inline-block;
height: 50px;
width: 1px; /* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
#keyframes animate-width {
0% { width: 50px }
50% { width: 1px }
100% { width: 50px }
}
<div></div>
<div style="padding: 0"></div>
A solution is to consider a parent element that you can force to have a width equal to 0 and hide the overflow:
.parent {
display: inline-block;
animation: animate-width 4s ease-in-out infinite;
background:red;
overflow:hidden;
}
.parent > div {
height: 50px;
padding: 10px;
box-sizing: border-box;
background: grey;
min-width:0;
width:100%;
}
#keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px
}
100% {
width: 50px
}
}
<div class="parent"><div></div></div>
<div class="parent"><div style="padding: 0"></div></div>
Yes, that's expected behaviour - padding is a part of an elements dimensions. Re "how can we deal with it": In your particular case, you can also animate the padding:
div {
display: inline-block;
height: 50px;
width: 1px;
/* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
#keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px;
padding: 0;
}
100% {
width: 50px
}
}
<div></div>
<div style="padding: 0"></div>
Consider this sample.
http://jsfiddle.net/dfabulich/ncbzz5zu/3/
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; right: 0; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
Expected: The red rectangle should smoothly animate from left to right as the color changes from red to blue.
Actual: In Chrome/Firefox, the red rectangle slowly changes color to purple, then teleports from left to right without animating, and then slowly changes from purple to blue. In Safari, the rectangle appears on the right and never moves from there, while animating from red to blue.
Why is this happening? How can I fix it? (I need to fix it in CSS… no JS, no jQuery.)
You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.
Also need to animate background color.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation: 3s linear 0s slide infinite;
}
#keyframes slide {
from { left: 0; }
to {
left: 100%;
transform: translateX(-100%);
background: blue;
}
}
<div class=container>
<div class=animated>
</div></div>
The problem is that you start animating property left, but then replace it with right in the end of animation, that's why it jumps. You should keep animating the same property to get the step by step animation progression.
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
from { background-color: red; left: 0; }
to { background-color: blue; left: 80%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
<div class="container"><div class="animated"></div></div>
#keyframes slide {
from { left: 0;}
to { left: 80%; } // edit: actually endpoint should point to left:100% minus width of the element so in your case 100%-20% = 80%. In case of width of the element in px use CSS calc like: left: calc(100% - ##px);
}
Simply when you used right you told transition to change totally different property. That is why you were jumping between left: 0 what is left side of your screen to right: 0 what is right edge of your screen.
<html>
<body>
<style>
.container {
position: relative;
width: 80%;
height: 100px;
border: 1px solid black;
}
#keyframes slide {
0% { background-color: red; left: 0; }
100% { background-color: blue; left: 100%; margin-left: -20%; }
}
.animated {
position: absolute;
width: 20%;
height: 100%;
top: 0;
background-color: red;
animation-duration: 3s;
animation-name: slide;
animation-iteration-count: infinite;
}
</style>
<div class=container>
<div class=animated>
</div></div>
see this snippet...
This is what it should look like:
http://jsfiddle.net/ncbzz5zu/11/
And this is the fix for it:
#keyframes slide {
from { background-color: red;
left:0%;}
to { background-color:blue;
left:80%;}
}
Basically, the animation didnt know what to do since you specified the initial left property but not the target value. It animated from left:0 to left:initial. Right fulfills a similar function to left but its still another property.