Develop Reference

Black background slide up

It is probably very simple but i'm stuck trying to make a homepage automatic background slider like here : https://www.jackdavison.co.uk
That's probably Jquery but I found a way to have something similar with html and Css, only it keeps repeating.
Any help ?
You can see my code here:
HTML
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS:
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
height: 560px;
width: 100%;
animation: slide 2s linear infinite;
animation-delay: 4000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -2000px, 0px);
}
}
See on Codepen here
Thank you !

You just need a minor change in your CSS. Just change animation: slide 2s linear infinite; to animation: slide 0.6s ease-out forwards;. Also, I have changed in -2000px to 100% in #keyframes in case if you have a full-height background.
animation-fill-mode: forwards; Let your element retain the style values from the last keyframe when the animation ends.
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
height: 560px;
width: 100%;
animation: slide 0.6s ease-out forwards;
animation-delay: 2000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -100%, 0px);
}
}
<div class="wrapper">
<div class="sliding-background"></div>
</div>
Please let me know if this helps.

To stop the animation and keep the last state use:
.sliding-background {
animation: slide 2s linear;
animation-fill-mode: forwards;
}

Thank you all for the help the clean code is this one :
Html
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
width: 100%;
height: 100vh;
animation: slide 0.6s ease-out forwards;
animation-delay: 2000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -100%, 0px);
}
}

CSS fan animation

I have three different image to which I want to apply a fan like animation.
I cant club the images in Photoshop as I want the images to appear one after the other.
This is the code (I have used dummy images in the code)
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
-ms-transform: rotate(300deg); /* IE 9 */
-webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 30% 100%;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>
This is the fiddle: http://jsfiddle.net/wzht89r3/2/
Solution can also be in jquery or javascript.

Something like this? I just changed the transform-origin of your .windmill rule.
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 220px 150px;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

Personally I would get rid of those additional classes and use the :nth-child pseudo class. Having each child with it's own offset (for example: top:150px; left:135px;) would mean that you would have to recalculate the positioning every time you change the image, so I removed them and found another way of positioning.
I used different images as they were facing the wrong direction. For this to work the arrow must be facing the rotation origin, in this case 0 0 or top-left.
To condense the answer I removed all vendor prefixes and the fade in transitions.
#windmill {
animation: spin-clockwise 2s linear 1200ms infinite;
transform-origin: 0 0;
position: relative;
top: 100px; /*Image dimensions*/
left: 100px;
}
#windmill > * {
position: absolute;
transform-origin: 0 0;
}
#windmill > *:nth-child(1) {transform: rotate(0deg);}
#windmill > *:nth-child(2) {transform: rotate(120deg);}
#windmill > *:nth-child(3) {transform: rotate(240deg);}
#keyframes spin-clockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div id="windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
</div>

jQuery make animation in pseudo after

I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.

It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle

CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}

spin around center with css3

infact i want to make Solar System for an Educational purpose! so a big yellow circle should be in the middle and others should spin around ! but i dont have any idea! just help with spining thing and i will find out other things! i find below code but it just spins around him self!
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
live demo : http://jsfiddle.net/hamidrezabstn/bLqak/

Refer to this tutorial/example for the solar system using CSS3:
CSS3 Solar System

Using simple CSS will do the trick:
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}

i found the simple answer too :D
.deform {
width: 200px;
height: 200px;
transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from {transform: rotateZ(0deg)}
to {transform: rotateZ(360deg)}
}
#keyframes ccircle {
from {transform: rotateZ(360deg)}
to {transform: rotateZ(0deg)}
}
Demo: http://jsfiddle.net/hamidrezabstn/fgcPa/3/embedded/result/

Possible to reverse a css animation on class removal?

Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})

In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake

CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)

You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.

Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.