I'm working on an animation with css and html but my animation isn't working.
https://www.abroprojectafbouw.nl/
Here is an example how it should look if its done (you need to scroll down) and here is my code. The black screen is always jumping back. Thank you for Help!
html,
body {
height: 100vh;
}
body {
margin: 0;
width: 100%;
}
.image {
animation: change 0.5s ease-out;
height: 70vw;
}
.img {
background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
background-size: cover;
position: relative;
width: 100%;
height: 70vw;
}
.overlay {
position: absolute;
width: 100%;
height: 70vw;
background-color: #000;
top: 0;
right: 0;
animation: slide 0.5s ease-out;
animation-delay: 0.6s;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes change {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="image">
<div class="img">
<div class="overlay"></div>
</div>
</div>
Add overflow: hidden to .img and forwards to slide animation.
html,
body {
height: 100vh;
}
body {
margin: 0;
width: 100%;
}
.image {
animation: change 0.5s ease-out;
height: 70vw;
}
.img {
background-image: url("https://www.abroprojectafbouw.nl/wp-content/uploads/moddit-fly-images/468/foto-15-scaled-770x500-c.jpg");
background-size: cover;
position: relative;
width: 100%;
height: 70vw;
overflow: hidden;
}
.overlay {
position: absolute;
width: 100%;
height: 70vw;
background-color: #000;
top: 0;
right: 0;
animation: slide 0.5s ease-out forwards;
animation-delay: 0.6s;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: 100%;
}
}
#keyframes change {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="image">
<div class="img">
<div class="overlay"></div>
</div>
</div>
Related
I'm new to HTML and CSS. I just made a carousel slide using HTML and CSS. And I want to insert text in the corners of this slide. I couldn't do that because whatever I tried didn't work. I'm also trying to redirect to a different page when clicking on this slide.
I'am sorry my English btw. I hope I could explain what I mean.
CSS and HTML of my slide:
.tech-slideshow {
height: 190px;
max-width: 2600px;
margin: 0;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 200px;
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 40s linear infinite;
}
#keyframes moveSlideshow {
50% {
transform: translateX(-40%);
}
}
<div class="tech-slideshow">
<div class="mover-1"></div>
</div>
Here's a possible solution with absolute positioning:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tech-slideshow {
height: 190px;
max-width: 2600px;
position: relative;
overflow: hidden;
}
.tech-slideshow__link {
display: block;
width: 100%;
height: 100%;
}
.mover-1 {
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
height: 100%;
animation: moveSlideshow 40s linear infinite;
}
.mover-1-text {
position: absolute;
padding: 0.5em 2em;
color: #fff;
background-color: #000;
font-size: 1.5rem;
}
.mover-1-text1 {
left: 10px;
top: 10px;
}
.mover-1-text2 {
left: 10px;
bottom: 10px;
}
.mover-1-text3 {
right: 10px;
bottom: 10px;
}
#keyframes moveSlideshow {
50% {
transform: translateX(-40%);
}
}
<div class="tech-slideshow">
<a href="#" class="tech-slideshow__link" target="_blank">
<div class="mover-1"></div>
<p class="mover-1-text mover-1-text1">Text</p>
<p class="mover-1-text mover-1-text2">Text</p>
<p class="mover-1-text mover-1-text3">Text</p>
</a>
</div>
I am using animations in CSS but it is not working. If I check in the inspect menu it is showing invalid syntax even though the syntax is normal. I have other two animations but they are working fine.
Only a particular animation in which I am trying to adjust the width isn't working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.bg-div {
background: url(imgs/sky.png);
height: 100vh;
background-size: 79% 792px;
background-position-y: -332px;
width: 900vw;
}
.sea-div {
background: url(imgs/sea.jpg);
height: 37vh;
position: absolute;
bottom: 0;
width: 900vw;
background-size: 10% 403px;
}
.bg-ani-class {
animation: seaMove linear infinite 3s;
background-repeat: repeat-x;
}
.sea-ani-class {
animation: seaMove linear infinite 6s;
background-repeat: repeat-x;
}
.obst-ani-class {
animation: obstMove linear 5s;
}
.mountain-div {
position: absolute;
top: 10vh;
/* width: 18vh; */
/* height: 20vh; */
left: 108vw;
}
.mountain-div img {
width: 148vh;
}
.hanuman-div {
position: absolute;
top: 28vh;
left: 3vw;
}
.hanuman-div img {
width: 20vw;
}
#gada {
position: absolute;
left: 0;
/* top: 56px; */
transition: 0.1s ease all;
}
.gada-rot {
left: 8vw !important;
transform: rotate(180deg);
top: -22px !important;
}
.laser {
position: absolute;
transform: rotateZ(189deg);
/* top: -14vh; */
left: 282px;
/* width: 45vw !important; */
width: 0% !important;
/* transition: 0.4s ease-out; */
animation: laserAnimation infinite 3s;
}
.dragon-1-div {}
.dragon-2-div {}
/* Animations */
/* These 2 Animations are working */
#keyframes seaMove {
100% {
transform: translateX(-500vw);
}
}
#keyframes obstMove {
0% {
left: 108vw;
}
100% {
left: -100vw;
}
}
/* This animation isn't working */
#keyframes laserAnimation {
from {
width: 0 !important;
}
to {
width: 45vw !important;
}
}
<div class="bg-div bg-ani-class"></div>
<div class="sea-div sea-ani-class"></div>
<div class="hanuman-div">
<img src="imgs/hanuman.png" alt="">
<img src="imgs/gada.png" alt="" id="gada">
<img src="imgs/laserbeam.png" alt="" class="laser">
</div>
<div class="mountain-div">
<img src="imgs/mountain.png" alt="">
</div>
<div class="dragon-1-div"></div>
<div class="dragon-2-div"></div>
It's generally not a good idea to animate width and height. Always try to use composite animations e.g. opacity, transforms. To achieve width animation use scale transform.
Here is a laser show for you:
body {
overflow: hidden;
}
.laser {
position: absolute;
left: 0;
top: 50%;
height: 10px;
width: 100%;
background: #d7272b;
animation: laserAnimation 2s ease-out infinite;
}
.greenLaser {
position: absolute;
left: 0;
top: 0;
height: 10px;
width: 100%;
background: #0063d5;
animation: laserAnimation 2s ease-out infinite;
}
.blueLaser {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 100%;
background: #00d53b;
animation: laserAnimation 2s ease-out infinite;
}
#keyframes laserAnimation {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
<div class="laser">
</div>
<div class="greenLaser">
</div>
<div class="blueLaser">
</div>
I have slideshow on my page, but I have small bug in animation and I can't find it.
I use slideshow according to this tutorial: https://www.youtube.com/watch?v=TzAshjkhFQw .
But I want to have only 3 slides not 4.
First 3 slides are ok, but instead of the fourth there is an empty background. I want only 3 slides and after that repeat slideshow.
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%; opacity: 1;}
30.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 0;}
}
<div class="slider">
<div class="slide">
<p>Slide1</p>
</div>
<div class="slide">
<p>Slide2</p>
</div>
<div class="slide">
<p>Slide3</p>
</div>
</div>
Thank you in advance for your advice!
You need to change the percentages in the animations as well as the timings on the individual slides
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 7s;
}
The animation was initially designed for 4 slides in 12 seconds, i.e. one slide every 3 seconds. If you want to change that to one slide every 4 seconds, you need to space the animations further apart (change the animation delay), and also change the animation so that the slide is visible for a longer time (multiply each percentage by 4/3).
This way of animating slides seems really inflexible however, so you might want to look at some other approach, which allows you to add or remove slides more easily.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.body {
height: 100vh;
text-align: center;
}
.square {
width: 100vm;
height: 100vm;
/* For IE9 */
width: 100vmin;
height: 100vmin;
display: inline-block;
vertical-align: middle;
margin-top: calc((100vh - 100vmin) / 2);
background-image: url('https://ae01.alicdn.com/kf/HTB12ZJjMXXXXXa_aXXXq6xXFXXXE/3-Piece-Wall-font-b-Picture-b-font-Dreamy-font-b-Purple-b-font-font-b.jpg');
font-size: 0;
}
.square:before {
content: "";
height: 100%;
}
.square:before,
.content {
display: inline-block;
vertical-align: middle;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content {
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}
#left-content {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: left;
}
#right-content {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: right;
}
#left-content:after {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: left;
opacity: 0;
content: ' ';
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#right-content:after {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: right;
opacity: 0;
content: ' ';
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#left-content:hover:after+.square {
background-image: url('https://ae01.alicdn.com/kf/HTB1EuKlLVXXXXcmXpXXq6xXFXXXd/E-HOME-Stretched-LED-Canvas-Print-Blue-Rose-Flash-Effect-LED-Flashing-font-b-Optical-b.jpg');
opacity: 1;
}
#right-content:hover:after {
background-image: url('https://ae01.alicdn.com/kf/HTB12hyVPVXXXXbEaXXXq6xXFXXX8/-font-b-Canvas-b-font-Painting-Printed-Pictures-Paints-Wall-Hanging-font-b-Canvas-b.jpg');
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body">
<div class="square">
<div class="content">
<a href="">
<div id="left-content"></div>
</a>
<a href="">
<div id="right-content"></div>
</a>
</div>
</div>
</div>
</body>
</html>
I would like to do the following.
DIV container contains two DIV (1 and 2).
When mouse is over DIV 1, the background image of DIV CONTAINER change to image1.
When mouse is over DIV 2, the background image of DIV CONTAINER change to image2.
I would like to try this with only CSS.
So it is actually possible with pseudo elements. Have a look at my example.
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#main:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main {
height: 170px;
border: 1px solid black;
box-sizing: border-box;
position: relative;
}
#div1 .show {
border-right: 1px solid black;
}
#div1:hover:before, #div2:hover:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
}
#div1:hover:before {
background: yellow;
}
#div2:hover:before {
background: green;
}
#div1, #div2 {
width: 50%;
display: block;
float: left;
text-align: center;
vertical-align: center;
box-sizing: border-box;
pointer-events: auto;
}
.show {
position: relative;
z-index: 2;
height: 168px;
}
<div id="main">
<div id="div1">
<div class="show">
div1
</div>
</div>
<div id="div2">
<div class="show">
div2
</div>
</div>
</div>
body { width: 100%; margin: 0; padding: 0; }
.container {
position: relative;
display: flex;
width: 100vw;
height: 100vh;
}
.div1, .div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50%;
height: 100%;
font-size: 24px;
font-weight: bold;
text-shadow: 0 0 10px black;
color: hsla(0, 57.6%, 50%, 0.5);
background-color: hsla(0, 0%, 0%, 0.1);
}
.background1, .background2 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
z-index: -1;
}
.background1 {
background: url("http://i.imgur.com/zFYHM67.jpg");
background-repeat:no-repeat;
background-size: cover;
}
.background2 {
background: url("http://i.imgur.com/nYKEFNF.jpg");
background-repeat:no-repeat;
background-size: cover;
}
.div1:hover ~ .background1 {
display: flex;
}
.div2:hover ~ .background2 {
display: flex;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="background1"></div>
<div class="div2">Div 2</div>
<div class="background2"></div>
</div>
fiddle
https://jsfiddle.net/Hastig/k652snyc/
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.
This is my css
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: relative;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
And my html
<div class="loader">
<div class="bar"></div>
</div>
And a jsfiddle with the code
Can someone tell me what I'm doing wrong?
It is because you have a heavy break between 49% and 50%.
49% {
width: 100%;
}
50% {
left: 100%;
}
Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
Snippet
body {margin: 0; padding: 0;}
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
width: 0;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/
If you need a pulsating effect, you need to use two extremes:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Snippet
body {margin: 0; padding: 0; overflow: hidden;}
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
width: 100%;
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
I have slightly changed your code, managed to make it work. Here's what I've changed:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Added overflow: hidden; to .loader
Added width: 100%; to .loader .bar
http://jsfiddle.net/wbyzy9jL/5/