Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Animations

Animation przykłady

kodzik

animation (1)

<img src="znikacz.png" alt="img" class="disappear"> Code language: JavaScript (javascript)
img.disappear {
    animation-name: disappearAnimation;
    animation-duration: 0.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes disappearAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        display: none;
        opacity: 0;
    }
}Code language: CSS (css)
img

animation (2)

<div class="item-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... </p>
</div>Code language: HTML, XML (xml)
.item-1 {
    background: #289DCC;	
    animation: ex1 5s infinite alternate;
}

@keyframes ex1 {
    0%   { background-color: #289DCC; }
    50%  { background-color: #000000; }
    100% { background-color: #FB0101; }
}Code language: CSS (css)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis adipisci temporibus, dolorum quos. Culpa minus dignissimos, quas alias quos at facere eaque hic amet quae, atque. Numquam magni recusandae cupiditate nihil praesentium quia sit, laborum, cum perferendis perspiciatis doloribus atque veniam. Reprehenderit voluptate quia architecto corrupti nobis provident dolorem veritatis, ea maiores ducimus incidunt itaque harum id reiciendis ipsa nulla.

animation (3)

<div class="item-2" id="div1">linear</div>
<div class="item-2" id="div2">ease</div>
<div class="item-2" id="div3">ease-in</div>
<div class="item-2" id="div4">ease-out</div>
<div class="item-2" id="div5">ease-in-out</div>Code language: HTML, XML (xml)
.item-2 {
    background: #289DCC;
    position: relative;
    animation: ex2 5s infinite alternate;
}

#div1 { animation-timing-function: linear; }
#div2 { animation-timing-function: ease; }
#div3 { animation-timing-function: ease-in; }
#div4 { animation-timing-function: ease-out; }
#div5 { animation-timing-function: ease-in-out; }

@keyframes ex2 {
    from { left: 0px; }
    to { left: 85%; }
}Code language: CSS (css)
linear
ease
ease-in
ease-out
ease-in-out

animation (4)

<div class="item-3">Hello!!</div>Code language: HTML, XML (xml)
.item-3 {
    background: #289DCC;
    position: relative;
    animation-name: ex3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes ex3 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 300px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 300px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}Code language: CSS (css)
Hello!!

animation (5)

<div class="item-4">Hello!!</div>Code language: HTML, XML (xml)
.item-4 {
    background: #289DCC;
    position: relative;
    animation-name: ex4;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes ex4 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 200px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 200px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}Code language: CSS (css)
Hello!!

animation (6)

<div class="item-5">Hello!!</div>Code language: HTML, XML (xml)
.item-5 {
    background: #289DCC;
    position: relative;
    animation-name: ex5;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes ex5 {
    0%   { background-color: OrangeRed; left: 0px; top: 0px; }
    25%  { background-color: Gold; left: 200px; top: 0px; }
    50%  { background-color: DeepSkyBlue; left: 200px; top: -200px; }
    75%  { background-color: LimeGreen; left: 0px; top: -200px; }
    100% { background-color: OrangeRed; left: 0px; top: 0px; }
}Code language: CSS (css)
Hello!!

animation (7)

<img src="spirala-blue.png" alt="img" class="item-6"> Code language: JavaScript (javascript)
.item-6 {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}Code language: CSS (css)
img

animation (8)

<div class="item7-hold"><div class="htmlDiv item-7"></div></div>Code language: HTML, XML (xml)
.item7-hold{
    overflow: hidden;
}

.item-7 {
    background: url("auto.png") repeat-x;
    height: 79px;
    width: 2000px;
    animation: slide 1s linear infinite;
}

@keyframes slide {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-200px, 0, 0); }
}Code language: CSS (css)

linki