I have a CSS animation on 3 boxes (Flexboxes) that transition from off screen to in position using transforms, however whenever I resize the window these boxes space out away from each other and move away from their intended positioning (they should be overlapping). How do I make these boxes stay in place? Or, if that is not possible, how can I remove the transforms to return them back to staying within one row but extending the full width of the screen ?
index.scss
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.container > div {
width: 30vw;
height: 80vh;
box-sizing: border-box;
border: solid 2px black;
&:nth-child(1) {
animation-name: scrollinRight;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: red;
}
&:nth-child(2) {
animation-name: scrollinTop;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: rgb(120, 107, 133);
z-index: 2;
}
&:nth-child(3) {
animation-name: scrollinLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: green;
}
}
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(100vh);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-100vh, 10%);
}
}
#keyframes scrollinTop {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(5%);
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
You could try to use percentage in your keyframes for the translateX
DEMO
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(150%);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-150%, 10%);
}
}
Related
well I`m trying to attempt a rotation on a img that i have
#cometa {
width: 200px;
position: fixed;
top: 20px;
right: 20px;
animation: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
with this example that i got from here
CSS3 Rotate Animation
But i want to the planet to rotate in its axys, this way it's rotating all over the place, what can i do the make it rotate diferently?
Animation name is missing in your code.
I hope it will help you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
#cometa{
width: 200px;
position: fixed;
top: 100px;
right: 200px;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}</style>
<title>Document</title>
</head>
<body>
<div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>
[UPDATED]
Below solution is for 3d rotation.
Click on full page if result isn't visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
#cometa{
width: 200px;
position: fixed;
top: 200px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotateY(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotateY(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}</style>
<title>Document</title>
</head>
<body>
<div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>
I found a great pure CSS slider online that does exactly what I need but the slider isn't responsive. I'd like it to resize based on the viewport size, so that if I drag the browser smaller, the slider resizes smaller along with it.. I've tried lots of suggestions from different websites but none of them worked. What can I do?
#slider {
width: 952px;
height: 409px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
Just add max-width:100vw; on #slider to make sure that the width of the slider does not overflow on your body.
DEMO
body{
margin:0; /* ADDED for SNIPPET Stackoverflow */
}
#slider {
width: 952px;
height: 409px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
max-width:100vw; /* ADDED */
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
If you are familiar with the concepts of break-points and media queries you can make this responsive pretty easily.
You can use media-queries like this:
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Which will apply a background-color to the body when the screen is smaller than 600px. By repeating this on all most common breakpoints (see bootstrap breakpoints) you will be able to style your pure css slider in a pretty efficient way.
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Try this code it will help you
Make your Width:100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
margin-top: 23px;
margin-bottom: 45px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
}
#slider > div {
width: 100%;
height: 100%;
background-size: contain;
position: absolute;
animation: slide 20s infinite;
opacity: 0;
}
#slider > div:nth-child(2) {
animation-delay: 5s;
}
#slider > div:nth-child(3) {
animation-delay: 10s;
}
#slider > div:nth-child(4) {
animation-delay: 15s;
}
#slider > div:nth-child(5) {
animation-delay: 20s;
}
#keyframes slide {
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
}
</style>
<div id="slider">
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide1.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide2.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide3.png)"></div>
<div style="background-image:url(http://www.cafenocturne.com/RackInspections/images/slide4.png)"></div>
</div>
</body>
</html>
Let me know if this will work for you
I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.
<div class="tm-scroll">
<span></span>
</div>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
Thanks for your help
You have to add scrollHelperFerro animation using keyframes like below
https://codepen.io/rohinikumar4073/pen/MWaeRMZ
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
,
}
}
<div class="tm-scroll">
<span></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="tm-scroll"><span></span></div>
</body>
</html>
here you define only animation-name, time, etc. but actual CSS animation code is following
animation: scrollHelperFerro 2s infinite ease-in-out;
add animation css:
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
I am trying to have the text only pulse in the center of the page I do not want it ever at the top
I have played around with the scale
CSS......
.Lum{
font-family: Edwardian Script ITC;
position: fixed;
top: 50%;
left: 50%;
font-size: 50px;
text-align: center;
transform: translate(-50%, -50%);
margin: 0;
letter-spacing: 1px;}
#keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
}
HTML..............
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body class="pulse">
<h3 class="Lum">Lumiere</h3>
</body>
</html>
I want the text always in the middle of the page never at the top
What you should do to fix the animation on current approach:
.Lum{
font-family: Edwardian Script ITC;
position: fixed;
top: 50%;
left: 50%;
font-size: 50px;
text-align: center;
transform: translate(-50%, -50%);
margin: 0;
letter-spacing: 1px;}
#keyframes pulse {
/* Since you're using translate, you shouldn't overwrite it with only scale, just combine them */
0% {transform: translate(-50%, -50%) scale(1);}
50% {transform: translate(-50%, -50%) scale(1.1);}
100% {transform: translate(-50%, -50%) scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
/* If you want the animation keeps going */
animation-iteration-count: infinite;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body>
<!-- You need to put pulse on the element, not the whole page -->
<h3 class="Lum pulse">Lumiere</h3>
</body>
</html>
Since you're using the transform for animation, maybe translate approach for centering is not very ideal. Maybe try this approach instead:
body {
/* Make the container flexbox */
display: flex;
/* Center its children */
justify-content: center;
align-items: center;
/* set the width and height as big as the window */
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.Lum{
font-family: Edwardian Script ITC;
font-size: 50px;
text-align: center;
margin: 0;
letter-spacing: 1px;
}
#keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
/* If you want the animation keeps going */
animation-iteration-count: infinite;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body>
<h3 class="Lum pulse">Lumiere</h3>
</body>
</html>
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()