Looping multiple css animation - css

I have a full css animation image comparison at the end with a packshot. I don't know how can i loop the full animation. Please help!
HTML:-
<div class='packshot' title='packshot'></div>
<div class='before' title='before'>
<div class='after' title='after'>
<textarea readonly cols='0' rows='0' class='container'></textarea>
</div>
</div>
<div class='brandstage' title='brandstage'></div>
CSS:-
html {
background: #fff;
height: 100%;
width: 100%;
}
.before {
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/kep01.jpg);
width: 640px;
height: 360px;
border: 0;
padding: 0;
margin: 0;
position: absolute;
overflow: hidden;
}
.after {
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/kep02.jpg);
height: 360px;
resize: horizontal;
position: absolute;
top: 0; left: 0;
min-width: 0;
max-width: 640px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.after:before {
content: '⟨ ⟩';
background: rgba(0,0,0,.2);
font-size: 18px;
color: white;
top: 0; right: 0px;
height: 100%;
line-height: 440px;
position: absolute;
}
.brandstage {
background-image: url(http://design.cafecommunications.hu/skoda/4x4/before-after/new-brandstage.jpg);
width: 640px;
height: 80px;
border: 0;
padding: 0;
margin: 0;
position: absolute;
z-index: 101;
}
.container {
resize: horizontal;
opacity: 0;
position: relative;
top: 50%;
left: 0px;
margin-right: 0px;
width: 0px; height: 0px;
max-width: 634px; min-width: 12px;
outline: 0 solid transparent;
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: intro 5s 1 normal ease-in-out 8s;
}
#keyframes intro {
0% {width: 0px}
30% {width: 640px}
60% {width: 0px}
100% {width: 640px}
}
.packshot {
background-image: url( http://design.cafecommunications.hu/skoda/4x4/before-after/kocsik.jpg);
width: 0%;
height: 100%;
background-repeat: no-repeat;
position: absolute;
transform-origin: center center;
animation: packshot 10s 1 normal ease-in-out 11s;
z-index: 100;
}
#keyframes packshot {
0% {width: 0%}
10% {width: 100%}
90% {width: 100%}
100% {width: 0%}
}

Add infinite to loop the keyframe calls and alternate to reverse the animation.
animation: intro 5s ease-in-out 8s alternate infinite;
animation: packshot 10s ease-in-out 11s alternate infinite;

Related

Two animations in CSS not working at the same time

I've created two animations with CSS a clock and a bouncing ball. Separately they both work as intended, but once I put them in the same file the bouncing ball disappeared.
If I delete #keyframes rotation the clock stops working but the bouncing ball appears. Is there any way how to make both animations work?
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid;
border-radius: 50%;
}
#second {
position: absolute;
background: black;
width: 2px;
height: 180px;
margin: 20px 199px;
animation: rotation 60s infinite linear;
transform-origin: bottom left;
}
#minute {
position: absolute;
background: black;
width: 6px;
height: 140px;
margin: 60px 197px;
animation: rotation 3600s infinite linear;
transform-origin: bottom right;
}
#hour {
position: absolute;
background: black;
width: 10px;
height: 120px;
margin: 80px 195px;
animation: rotation 43200s infinite linear;
transform-origin: bottom left;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
.box {
position: relative;
}
.ball {
position: absolute;
height: 100px;
width: 100px;
border: 3px solid pink;
border-radius: 50%;
animation: bounce 2s infinite;
background: pink;
}
.step1 {
position: absolute;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
.step2 {
position: absolute;
top: 150px;
left: 220px;
margin-top: 20px;
height: 10px;
width: 220px;
background: cyan;
}
.step3 {
margin-top: 40px;
position: absolute;
left: 440px;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
#keyframes bounce {
from {margin: 100pxz 0px;}
to{margin: 50px 500px;}
0% {
transform: translateY(-30%);
}
12% {
transform: translateY(33%);
}
24% {
transform: translateY(-66%);
}
36% {
transform: translateY(33%);
}
48% {
transform: translateY(-20%);
}
100% {
transform: translateY(33%);
}
<div class="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="box">
<div class="step1"></div>
<div class="step2"></div>
<div class="step3"></div>
<div class="ball"></div>
</div>
It works fine, you're/were missing the closing brackets on your keyframes
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid;
border-radius: 50%;
}
#second {
position: absolute;
background: black;
width: 2px;
height: 180px;
margin: 20px 199px;
animation: rotation 60s infinite linear;
transform-origin: bottom left;
}
#minute {
position: absolute;
background: black;
width: 6px;
height: 140px;
margin: 60px 197px;
animation: rotation 3600s infinite linear;
transform-origin: bottom right;
}
#hour {
position: absolute;
background: black;
width: 10px;
height: 120px;
margin: 80px 195px;
animation: rotation 43200s infinite linear;
transform-origin: bottom left;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.box {
position: relative;
}
.ball {
position: absolute;
height: 100px;
width: 100px;
border: 3px solid pink;
border-radius: 50%;
animation: bounce 2s infinite;
background: pink;
}
.step1 {
position: absolute;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
.step2 {
position: absolute;
top: 150px;
left: 220px;
margin-top: 20px;
height: 10px;
width: 220px;
background: cyan;
}
.step3 {
margin-top: 40px;
position: absolute;
left: 440px;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
#keyframes bounce {
from {
margin: 100pxz 0px;
}
to {
margin: 50px 500px;
}
0% {
transform: translateY(-30%);
}
12% {
transform: translateY(33%);
}
24% {
transform: translateY(-66%);
}
36% {
transform: translateY(33%);
}
48% {
transform: translateY(-20%);
}
100% {
transform: translateY(33%);
}
}
<div class="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="box">
<div class="step1"></div>
<div class="step2"></div>
<div class="step3"></div>
<div class="ball"></div>
</div>

Css3 animations waves effect

I have created an container that if filling up and I want to apply to that some "waves animated effect" and I'm a bit stuck because I am not sure how to do it:
Does anyone cand help me with those waves effecct animations ?
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(225deg);
background-color: #00eaff;
bottom: -80px;
left: -80px;
right: 0;
height: 10px;
width: 200%;
animation: fill-up 1s ease infinite;
}
#keyframes fill-up {
to {
height: 300px;
}
}
<div class="container">
<div class="shape">
<div class="frame" />
</div>
</div>
working example: https://codesandbox.io/s/vigorous-keldysh-uw2po?file=/src/styles.css:81-720
Improved your code with inner element .wave with two rotating blocks. No JavaScript, no svg. Switch overflow hidden off to see how simple it works.
body {
background-color: #015871;
}
.container {
position: relative;
width: 700px;
height: 300px;
margin: 100px auto;
}
.shape {
width: 200px;
height: 200px;
border-radius: 50%;
border-top-right-radius: 0;
transform: rotate(-45deg);
float: left;
margin-top: 50px;
margin-left: 20px;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.frame {
position: absolute;
transform: rotate(45deg);
background-color: rgba(0, 234, 255, 0.5);
bottom: -8px;
left: 15px;
right: 0;
height: 245px;
width: 200px;
}
.wave {
position: absolute;
top: 50%;
left: 0;
width: 200%;
height: 200%;
transform: translate(-25%, 0);
background: #4973ff;
animation: fill-up 10s ease infinite;
}
#keyframes fill-up {
to {
top: -60%;
}
}
.wave:before,
.wave:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgba(1, 88, 113, 1);
animation: animate 3s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgba(1, 88, 113, 0.5);
animation: animate 3s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="container">
<div class="shape">
<div class="frame">
<div class="wave">
</div>
</div>
</div>
</div>
Working example https://codepen.io/focus-style/pen/oNbxVBX

Css sequential animation messed up

I want to achive a sequential css animation, where a div moves around the borders of another div. Two of the directions work (down to up and right to left) works, the others seem to get mixed up.
The code I have is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
body {
background: #000;
}
.box-outer {
overflow: hidden;
margin: 50px auto;
width: 200px;
height: 200px;
}
.main_box {
width: 200px;
height: 200px;
position: relative;
background: #f34c4c;
border: 10px solid #000;
}
.bar {
position: absolute;
width: 10px;
height: 10px;
background: #fff;
top: -10px;
left: -10px;
animation-name: move-right, move-down, move-left, move-up;
animation-delay: 0, 2s, 4s, 6s;
animation-duration: 2s, 2s, 2s, 2s;
animation-iteration-count: infinite, infinite, infinite, infinite;
}
#keyframes move-right {
0% {
left: -10px;
}
25% {
left: 100%;
}
}
#keyframes move-down {
26% {
top: -10px;
}
50% {
top: 100%;
}
}
#keyframes move-left {
51% {
left: 100%;
}
75% {
left: -10px;
}
}
#keyframes move-up {
76% {
top: 100%;
}
99% {
top: -10px;
}
}
<div class="box-outer">
<div class="main_box">
<div class="bar"></div>
</div>
</div>
This is because you have to set both top and left values in each of your Keyframes.
By the way, you could use a single animation, not 4.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
body {
background: #000;
}
.box-outer {
overflow: hidden;
margin: 50px auto;
width: 220px;
height: 220px;
}
.main_box {
width: 220px;
height: 220px;
position: relative;
background: #f34c4c;
border: 10px solid #000;
}
.bar {
position: absolute;
width: 10px;
height: 10px;
background: #fff;
}
.top {
top: -10px;
left: -10px;
animation: move 4s infinite linear;
}
#keyframes move {
0% {
top: -10px;
left: -10px;
}
25% {
top: -10px;
left: 200px;
}
50% {
top: 200px;
left: 200px;
}
75% {
top: 200px;
left: -10px;
}
}
<div class="box-outer">
<div class="main_box">
<div class="bar top"></div>
</div>
</div>

CSS animate — how to fill div from center

In the fiddle below — I want the divs to fill in from the center, instead of from the top/left.
I've seen examples where margins are set in the keyframe, but that looks forever unclean to me.
Also, could I do this with transitions instead, is animate the best way to do this?
Here's the fiddle https://jsfiddle.net/hogue/mu0f6mk1/
.wrap {
position: relative;
margin: 0 auto;
width: 600px;
height: 600px;
cursor: pointer;
}
.wrap div {
border-radius: 10px;
box-shadow: inset 0 0 45px rgba(255, 255, 255, .3), 0 12px 20px -10px rgba(0, 0, 0, .4);
color: #FFF;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, .3);
font: bold 3em sans-serif;
}
.first-layer {
background: #95a5a6;
width: 0px;
height: 0px;
position: absolute;
-webkit-animation: firstLayer 2s ease-in 0s forwards;
}
.second-layer {
background: #95a5a6;
width: 0px;
height: 0px;
position: absolute;
top: 8.5%;
left: 8.5%;
-webkit-animation: secondLayer 2s ease-in 0s forwards;
}
.third-layer {
background: #95a5a6;
width: 0px;
height: 0px;
position: absolute;
top: 17%;
left: 17%;
-webkit-animation: thirdLayer 2s ease-in 0s forwards;
}
.fourth-layer {
background: #95a5a6;
width: 0px;
height: 0px;
position: absolute;
top: 25%;
left: 25%;
-webkit-animation: fourthLayer 2s ease-in 0s forwards;
}
#-webkit-keyframes firstLayer {
to {
width: 400px;
height: 400px;
}
}
#-webkit-keyframes secondLayer {
to {
width: 300px;
height: 300px;
}
}
#-webkit-keyframes thirdLayer {
to {
width: 200px;
height: 200px;
}
}
#-webkit-keyframes fourthLayer {
to {
width: 100px;
height: 100px;
}
}
<div class="wrap">
<div class="first-layer"></div>
<div class="second-layer"></div>
<div class="third-layer"></div>
<div class="fourth-layer"></div>
</div>
I have repaired you the code
#-webkit-keyframes firstLayer {
from {
width: 0px;
margin-left: 0;
margin-top: 0;
height: 0px;
}
to {
width: 400px;
margin-left: -200px;
margin-top: -200px;
height: 400px;
}
}

CSS animation not working properly in Safari

My animation works in both Chrome and Firefox but not Safari, and I cannot figure out why. I use both the -webkit-animation and the simple animation function, yet it refuses to work in Safari. My CSS is as follows:
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: 0;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #7CE1C9;
height: 30px;
display: block;
width: 100%;
-webkit-animation: bar-before 1 1.8s;
animation: bar-before-two 1 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#-webkit-keyframes bar-before{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes bar-before-two {
0%{
width: 0px;
}
100%{
width: 100%;
}
}
I am simply at a standstill, any ideas?
There are two names in the animation bar-before and bar-before-two they were not prefixed properly, I think you can just merge them into one - i.e. progress-bar. Otherwise set them individually.
-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;
#-webkit-keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: 0;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #7CE1C9;
height: 30px;
display: block;
width: 100%;
-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#-webkit-keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
#keyframes progress-bar{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
<div class="bar">bar</div>

Resources