How to make it so that when the page is opened, first picture is immediately displayed and only then the slider animation starts?
css
.container_slider_css {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.photo_slider_css {
position: absolute;
animation: round 24s infinite;
opacity: 0;
width: 100%;
}
#keyframes round {
35% {
opacity: 1;
}
50% {
opacity: 0;
}
}
img:nth-child(1) {
animation-delay: 16s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(3) {
animation-delay: 0s;
}
html
<div class="container_slider_css">
<img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
<img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
<img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>
I am not sure what you exactly meant. I assume you want the slider to start animating/sliding? You'd need to use a line of Javascript - window.onload and write a function that enables certain css element to load.
window.onload = function() {}
Related
This is my HTML and CSS code where I want the animation to take place
.pig {
animaton-name: apple;
animation-duration: 3s;
}
#keyframe apple {
from {
top: 0px;
}
to {
right: 200px;
}
}
<div class='pig'>
<h2> About me </h2>
</div>
I'm trying to make my header move to the right, however it is not working, I am new to CSS, and I am using resources online but I can't figure out where I went wrong.
first add position : absolute to .pig class because We need the position to be able to apply top , left , right ,bottom and then edit your animaton-name to animation-name and the last one is edit your keyframe to keyframes
.pig {
animation-name: example;
animation-duration: 3s;
position: absolute;
}
#keyframes example {
from {
right: 0px;
}
to {
right: 200px;
}
}
<div class='pig'>
<h2> About me </h2>
</div>
Try this
.pig{
animation: 3s linear 0s apple;
}
#keyframes apple {
from {
transform: translateX(0px);
}
to {
transform: translateX(200px);
}
}
<div class = 'pig'>
<h2> About me </h2>
</div>
here is it it will help you move your header towards right
.pig {
animation-name: example;
animation-duration: 3s;
position: absolute;
}
#keyframes example {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div class='pig'>
<h2> About me </h2>
</div>
.pig {
animation-name: apple;
animation-duration: 3s;
position: absolute;
}
#keyframes apple{
from {
left: 0px;
}
to {
left: 200px;
}
}
<div class='pig'>
<h2> About me </h2>
</div>
Imagine i have 3 div :
<div class="one animated">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
I have a code to move the first to the top :
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
I don't understand why the first div move to top, but not the others.
The first one disappear so i want to replace the blank by my others div ...
Something like that :
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% { top: 0; opacity: 1 }
100% { top: -300px; opacity: 0 }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Use absolute:position; on Keyframes. This will make sure as soon as the div is hidden it automatically moves to the top.
Also you can add additional keyframes attributes to make if smooth.
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
}
#keyframes animation {
0% {
top: 0;
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
position: absolute;
}
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
Add position: absolute; to .animated class in your css
function test() {
document.getElementById("sample").classList.add("animated");
}
.one {
border: 1px solid red;
}
.animated {
animation: animation 2s;
animation-fill-mode: forwards;
position: absolute; // Adding this will help
transition: all 2s linear;
}
#keyframes animation {
0% { top: 0; opacity: 1; }
50% {top: -1; opacity: 0.5;}
100% { top: -300px; opacity: 0; }
}
<div class="one" id="sample">
I'm the first div
</div>
<div class="two">
second div
</div>
<div class="three">
Last one
</div>
<button onclick="test()">Test</button>
I'm trying to create a sequential text animation. One line, then the next, then the next. But it animates all three lines at the same time.
.autotype {
overflow: hidden;
white-space: nowrap;
}
.autotype {
animation: autotype 8s steps(10, end);
animation-iteration-count: infinite;
}
#keyframes autotype {
from {
width: 0px;
}
}
#keyframes autotype {
0% {
width: 0px;
}
20% {
width: 70px;
}
40% {
width: 140px;
}
60% {
wdith: 210px;
}
80%. {
width: 280px;
}
100% {
width: 500px;
}
}
.alignnone {
height: 20px;
width: 50px;
position: relative;
top: 4px;
}
<div class="autotype">.
<p>Hello, and welcome to
<img src="http://4309.co.uk/wp-
content/uploads/2020/01/
Screenshot_20200110_150836-
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium
wp-image-8431" />Feel free to look</p>
<p>around the site and contact us via the form<br> on the contact page</div>
So how do i animate it so that it reveals the first line, and only when this is fully revealed begins the second and so on. I've tried using height in the animation itself but, whilst this works for the first line, when it goes higher for the next line they've already rendered.
Since CSS cannot detect characters, I suggest you to
Wrap the lines inside a separate class autotype1, autotype2 and autotype3.
Hide the other lines initially with width: 0 or opacity: 0;
Use animation-delay with timing like 2n, 3n to make it sequential.
If you want to make it infinite, you might want to add a bit of JS with the help of these answers: CSS animation delay in repeating
.autotype {
overflow: hidden;
white-space: nowrap;
}
.autotype {
animation: autotype 4s steps(10, end);
animation-fill-mode: forwards;
}
.autotype2 {
width: 0;
animation-delay: 4s;
margin-bottom: 0;
}
.autotype3 {
width: 0;
animation-delay: 8s;
margin-top: 0;
}
#keyframes autotype {
from {
width: 0px;
}
}
#keyframes autotype {
0% {
width: 0px;
}
20% {
width: 70px;
}
40% {
width: 140px;
}
60% {
width: 210px;
}
80%. {
width: 280px;
}
100% {
width: 500px;
}
}
.alignnone {
height: 20px;
width: 50px;
position: relative;
top: 4px;
}
<div>.
<p class="autotype autotype1">Hello, and welcome to
<img src="http://4309.co.uk/wp-
content/uploads/2020/01/
Screenshot_20200110_150836-
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium
wp-image-8431" />Feel free to look</p>
<p class="autotype autotype2">around the site and contact us via the form<br>
</p>
<p class="autotype autotype3"> on the contact page</p>
</div>
I've coded a reveal image animation and have stumbled across an issue when in the creation.
.container{
overflow: hidden;
}
.image {
background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
background-size: cover;
width: 400px;
height: 400px;
animation: 1s ease-out 0s 1 slideInFromLeft;
overflow: hidden;
}
#keyframes slideInFromLeft {
0% {
transform: translatex(-100%);
}
100% {
transform: translatex(0%);
}
}
<div class="container">
<div class="image">
</div>
</div>
The animation seems to be working fine except for it not sliding smoothly. It seems to have a jitter of some sort.
How can I make the animation slide more smoothly?
You could wait for the page/image to load and then trigger the animation to happen. The code below is a crude way of applying the animation class once with js.
window.onload = function() {
var element = document.getElementById('img1');
element.classList.add("show");
element.classList.add("animate");
}
.container{
overflow: hidden;
}
.image {
background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
background-size: cover;
width: 400px;
height: 400px;
opacity: 0;
overflow: hidden;
}
#img1.animate{
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.show {
opacity:1;
}
#keyframes slideInFromLeft {
0% {
transform: translatex(-100%);
}
100% {
transform: translatex(0%);
}
}
<div class="container">
<div id="img1" class="image" >
</div>
</div>
I'd use an <img> element for this and remove it when it loaded, after I pass it's src to the backgroundImage of the parent, as it was already loaded:
let imageDivs = document.querySelectorAll('.image img');
for (var i = 0; i < imageDivs.length; i++) {
imageDivs[i].addEventListener('load', imageLoaded)
}
function imageLoaded(e) {
let div = e.target.closest('div');
div.style.backgroundImage = 'url('+this.src+')';
div.classList.add('loaded');
div.removeChild(div.querySelector('img'));
}
.container{
overflow: hidden;
}
.image {
background-size: cover;
width: 400px;
height: 400px;
transform: translatex(-100%);
overflow: hidden;
}
.image.loaded{
animation: slideInFromLeft 1s cubic-bezier(.5,0,.3,1) forwards;
}
.image img {
height: 0;
}
#keyframes slideInFromLeft {
0% {
transform: translatex(-100%);
}
100% {
transform: translatex(0);
}
}
<div class="container">
<div class="image">
<img src="https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg">
</div>
</div>
This triggers the animation of a particular <div> (if you have more than one) as soon as that image loaded, rather than triggering all of them after all images in the page have loaded (if you use window.load).
However, this doesn't mean you should load huge resources in your page. Optimizing your images and loading them the right size for current device is a very important step in website optimization. You should use srcset for this purpose.
I'm trying to make a css class and animation which will make a div (and it's contents) fade out or move, but ultimately, the div to have display:none and visibility:hidden
My effort is not working! I can get it to either animate, or to appear to be "removed"
This crude example demonstrates the issue
.hide {
animation-name:fadeOut;
animation-duration:1s;
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
I also tried updating the CSS to
to {
opacity: 0;
margin-left: -100%;
visibility: hidden;
display: none;
}
And also on https://jsfiddle.net/
As you can see, in the CSS I have commented out the hiding part (although the opacity makes it hidden).
Is it possible to apply the fadeout and then update the visibility and display without using JavaScript?
Add animation-fill-mode: forwards; so that the element you're animating stays on the last (key)frame, and it doesn't start over or refresh to the beginning.
Learn more about animation-fill-mode.
Another way to write this animation:
.hide {
animation: fadeOut 1s forwards;
}
.hide {
animation-name:fadeOut;
animation-duration:1s;
animation-fill-mode: forwards; /* added */
/*visibility: hidden;
display: none;*/
}
#keyframes fadeOut {
from {
opacity: 1;
margin-left: 0%;
}
to {
opacity: 0;
margin-left: -100%;
height: 0; /* added */
}
}
<div class="hide">
<div style="padding:20px;background:orange;">
<div style="padding:5px;background:azure;">
My content
</div>
</div>
</div>
<div>
Other content
</div>
Scrollbar fix
A possible solution to the scrollbar issue is to bring the hidden element back to the initial position with margin: 0; (or whatever the initial margin was):
#keyframes fadeOut {
0% {
opacity: 1;
margin-left: 0%;
}
99% {
opacity: 0;
margin-left: -100%;
height: 0;
}
100% {
opacity: 0;
margin-left: 0; /* added */
height: 0;
}
}