I just want this image to scale down from 2 and back to normal then stop.
In my browser it jitters at the end of the animation and the image goes back to the normal size..
Any idea why it's doing this?
Codepen here also.
.hero {
height: 100vh;
background: grey;
overflow:hidden;
}
.image {
background-position:center;
background-size:cover;
background-repeat:no-repeat;
height: 30vw;
width: 50%;
margin-left: auto;
animation: scale 4.5s ease;
-webkit-animation: scale 4.5s ease;
-moz-animation: scale 4.5s ease;
-o-animation: scale 4.5s ease;
-ms-animation: scale 4.5s ease;
backface-visibility: hidden;
}
#keyframes scale {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<section class="hero">
<div class="image" style="background-image:url('https://picsum.photos/1000/1000')"></div>
</section>
Related
I'm trying to change a background animation of a div using CSS animations, however, I am not able to make the transition smooth.
Any idea on how to do it? Here is my code.
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
animation: mymove 5s;
animation-delay: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
#keyframes mymove {
from {
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
}
to {
background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80');
}
<div class="cover">
</div>
What am I doing wrong here?
The normal background change has no animation. What you can do is the following:
You decrease the opacity of the background, change the background image and increase the opacity again. This will achieve a fade effect.
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
animation: mymove 5s;
animation-delay: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
#keyframes mymove {
0% { background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80'); }
50% { background-color:rgba(0, 0, 0, 0.5); }
51% { background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80'); }
100% { background-color:rgba(0, 0, 0, 1); }
<div class="cover">
</div>
I think the best option is to add a transition to your background image, so if you change it, there will be a animation. (In this example I used the :hover event)
.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
transition: background-image 5s ease-in-out;
}
.cover:hover{
background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80');
}
<div class="cover">
</div>
I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?
We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>
You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>
I have a question in regards to building an Infinite Scrolling Banner on a website I'm working on.
I made it by putting all my images on one image and having it scroll across the screen above my footer.
2 issues I'm having, the image is overlapping my outside container, I want it to just show up in the designated area for my content. Also my image isn't repeating it will scroll through the whole image and then start over, I was wondering if I can have the image run on repeat and no overlap my container outside it looks bad.
Here is the code I wrote for it, I would really appreciate any help from you guys, and I'd like to thank you in advance for helping me out.
This is the layout for the code.
<div class="photobanner" style="display: inline-block; height: 150px; width: 2500px; overflow: hidden;">
<img class="first" src="https://www.dcnevents.com/wp-content/uploads/2018/01/ScrollingSponsor-1.png" alt="" />
</div>
This is the styling I've done for the code:
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
.photobanner img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p .first{
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
display:inline-block;
}
In the slideshow shown below, there are two images available. Once clicking on a button for the second image after first opening my page, there is a sudden jump to that image with no 5 second transition as expected. Also when doing this, I notice that #slideshowimage-2 is shown in the url (doing this offline) after clicking the button for that image. Here's the code below:
CSS:
.slideshowcontainer {
width:800px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
text-align:center;
overflow:hidden;
position:relative;
top:30px;
border-style:solid;
border-width:10px;
border-color:white;
border-radius:15px;
}
.imagecontainer {
width:1800px;
height:400px;
clear: both;
position:relative;
-webkit-transition:left 3s;
-moz-transition:left 3s;
-o-transition:left 3s;
-ms-transition:left 3s;
transition:left 3s;
animation:scroller 16s infinite;
}
#keyframes scroller {
0% {transform:translateX(0);}
31.25% {transform:translateX(0);}
50% {transform:translateX(-800px);}
81.25% {transform:translateX(-800px);}
100% {transform:translateX(0);}
}
.slideshowimage {
float:left;
margin:0px;
padding:0px;
position:relative;
}
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
.buttoncontainer {
position:relative;
top:-20px;
}
.button {
display:inline-block;
height:10px;
width:10px;
border-radius:10px;
background-color:darkgray;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
-o-transition:background-color 0.25s;
-ms-transition:background-color 0.25s;
transition:background-color 0.25s;
}
.button:hover {
background-color:gray;
}
HTML:
<div class="slideshowcontainer">
<span id="slideshowimage-1"></span>
<span id="slideshowimage-2"></span>
<span id="slideshowimage-3"></span>
<div class="imagecontainer">
<img src="WebServiceSlide.png" class="slideshowimage" style="width:800px;height:400px;">
<img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;">
</div>
<div class="buttoncontainer">
</div>
</div>
How could I make it so that the transition set upon clicking a button occurs on the first click? Many thanks in advance.
Reason:-
Because the left and translateX both are different. If you apply left:-800px when slide is at translateX(-800px) (2nd slide) then animation will continue at the 2nd part of slideshow. Thats why you are seeing a blank white space(when translateX(-800px) accors when it is already left:-800px).
Solution:-
You either have to use translateX or left. use the same in all the places
Part of code that solved the problem:-
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
Explanation:-
This code doesn't do translateX manually. Instead it uses animation to scoll single time by animation: change 3s forwards;
Drawback:-
Once we click on the slide selection button the animation stops. I have even tried it to solve by adding animation in the change keyframes animate end section. But unfortunately it didn't work. So I would suggest an alternate method to overcome the drawback as follows
To overcome the drawback I have added a play button which
will replay the slideshow animation which got paused by the slide
button. (Once we click on play button it takes a little time to slide
as we have given 16s in animation)
DEMO:-
.slideshowcontainer {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
position: relative;
top: 30px;
border-style: solid;
border-width: 10px;
border-color: white;
border-radius: 15px;
}
.imagecontainer {
width: 1800px;
height: 400px;
clear: both;
position: relative;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
transition: all 3s;
transform: translateX(0px);
animation: scroller 16s infinite;
}
#keyframes scroller {
0% {
transform: translateX(0);
}
31.25% {
transform: translateX(0);
}
50% {
transform: translateX(-800px);
}
81.25% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
}
}
#keyframes scroller2 {
0% {
transform: translateX(-800px);
}
31.25% {
transform: translateX(-800px);
}
50% {
transform: translateX(0);
}
81.25% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
}
}
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
.slideshowimage {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
#slideshowimage-3:target ~ .imagecontainer {
transform: translateX(0);
animation: scroller 16s infinite;
}
.buttoncontainer {
position: relative;
top: -20px;
}
.button {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 10px;
background-color: darkgray;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-ms-transition: background-color 0.25s;
transition: background-color 0.25s;
}
.button:hover {
background-color: gray;
}
.buttonplay:after {
height: 0;
width: 0;
top: 0;
margin-left: 10px;
position: absolute;
content: ' ';
border-left: solid 13px darkgray;
border-top: solid 8px transparent;
border-bottom: solid 8px transparent;
}
<div class="slideshowcontainer">
<span id="slideshowimage-1"></span>
<span id="slideshowimage-2"></span>
<span id="slideshowimage-3"></span>
<div class="imagecontainer">
<img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;">
<img src="https://placehold.it/900x450" class="slideshowimage" style="width:800px;height:400px;">
</div>
<div class="buttoncontainer">
</div>
</div>
I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
Try using keyframes.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
You need to use animation instead of transition. Transition effects are triggered on certain events, for example a click which adds a class or a hover.
div img {
animation: example 1s ease-in-out forwards;
}
#keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Now you would of course have to add the prefixes for that, webkit, moz, etc.
For basic knowledge about keyframe animation in css3:
http://www.w3schools.com/css/css3_animations.asp