I have this codepen example: https://codepen.io/levai-ferenc/pen/bGLYVOr
<div class="wrapper">
<div class="element">
<div class="image" />
</div>
</div>
#keyframes alpha_buildIn {
0% {
opacity: 0;
-webkit-opacity: 0;
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);}
100% {
opacity: 1;
-webkit-opacity: 1;
}
}
#-webkit-keyframes alpha_buildIn {
0% {
opacity: 0;
-webkit-opacity: 0;
transform: translateX(0) translateY(0);
-webkit-transform: translateX(0) translateY(0);
}
100% {
opacity: 1;
-webkit-opacity: 1;
}
}
.wrapper {
width: 580px;
height: 400px;
background-color: rgb(218, 39, 39);
transform: scale(2.81724);
transform-origin: 0px 0px 0px;
}
.element {
animation: 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal both running
alpha_buildIn;
width: 100%;
height: 100%;
}
.image {
width: 100%;
height: 100%;
background-image: url(https://d1az8j93w0r5an.cloudfront.net/assets/media/8oxrr);
mix-blend-mode: color;
}
I have to use mix-blend-mode, but it doesn't apply if I use animation on a div over
Any idea how can I do it to work both ? Animation and blend-mode too.
Related
I have an element that should come towards the user in front of the screen but also like falling from above.
I have tried transitioning from rotateX(-90deg) to rotateX(0) and from rotateX(360deg) to rotateX(270deg), but it does not look the way I want.
Also I do not what would be a good way to search for this on Google.
Sketch
Source code
body {
margin: 0 0;
}
.my-class-here {
width: 100%;
height: 100vh;
animation-name: header-anim;
animation-duration: 5s;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
}
#keyframes header-anim {
0% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(270deg);
}
}
<div class="my-class-here">
TEST
</div>
How can I achieve this?
Thank you!
You need to correct your transform-origin and add some perspective:
body {
margin: 0 0;
}
.my-class-here {
animation: header-anim 2s;
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
transform-origin:top; /* don't forget this */
}
#keyframes header-anim {
0% {
transform: perspective(200px) rotateX(270deg);
}
100% {
transform: perspective(200px) rotateX(360deg);
}
}
<div class="my-class-here">
TEST
</div>
I believe that this is what you're looking for.
#-webkit-keyframes slide-in-fwd-tr {
0% {
-webkit-transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0) translateY(0) translateX(0);
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
#keyframes slide-in-fwd-tr {
0% {
-webkit-transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
transform: translateZ(-1400px) translateY(-800px) translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0) translateY(0) translateX(0);
transform: translateZ(0) translateY(0) translateX(0);
opacity: 1;
}
}
I use an image and three spans as siblings within a wrapper (.avatar), to display a small avatar. I added two animations. The animated elements are the spans. They are animated with a small delay.
One animation is executed immediately (#keyframes rings-load). The other one (#keyframes rings-hover) executes, when .avatar is hovered.
Problem: After hovering .avatar, leaving the element, the initial animation is triggered a second time. Why is that? What would be considered best practice to prevent this behaviour?
Expected: Animation rings-load executes once on page load and is not executed again. Animation rings-hover executes once on every hover on element with class .avatar.
/* vars */
:root {
--avatar-size: 140px;
}
/* general */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #333;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
height: 100vh;
}
/* avatar */
.avatar-container {
margin: 2rem;
padding: 21px;
}
.avatar img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 100%;
padding: 2px;
cursor: pointer;
}
.avatar span {
border-radius: 100%;
position: absolute;
width: var(--avatar-size);
height: var(--avatar-size);
border: 1px solid #ffffffee;
background: #333;
z-index: -1;
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.avatar span:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.avatar span:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.avatar:hover span {
-webkit-animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.avatar:hover span:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.avatar:hover span:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
/* animations */
#-webkit-keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#-webkit-keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<main>
<div class="avatar-container">
<div class="avatar">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
</div>
</div>
</main>
Your hover resets the base animation. Then, when you unhover, it is apllied again, so it plays again.
Instead, on hover add the new animation on top of the previous one. This will make the animation not to be reset, and the unhover won't trigger it
Alos, you can forget about webkit prefixes.
/* vars */
:root {
--avatar-size: 140px;
}
/* general */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #333;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
height: 100vh;
}
/* avatar */
.avatar-container {
margin: 2rem;
padding: 21px;
}
.avatar img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 100%;
padding: 2px;
cursor: pointer;
}
.avatar span {
border-radius: 100%;
position: absolute;
width: var(--avatar-size);
height: var(--avatar-size);
border: 1px solid #ffffffee;
background: #333;
z-index: -1;
opacity: 0;
transform: scale(1);
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-iteration-count: 1;
}
.avatar span:nth-child(2) {
animation-delay: 200ms;
}
.avatar span:nth-child(3) {
animation-delay: 300ms;
}
.avatar:hover span {
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
}
.avatar:hover span:nth-child(2) {
animation-delay: 200ms;
}
.avatar:hover span:nth-child(3) {
animation-delay: 300ms;
}
/* animations */
#-webkit-keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#-webkit-keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<main>
<div class="avatar-container">
<div class="avatar">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
</div>
</div>
</main>
I am using a CSS3 text slider that was made for 3 lines of text. I wish to add two more lines but cannot figure out how to recalculate keyframes.
I added the additional items in CSS, but do not know how to recalculate the keyframes.
Any help is greatly appreciated!
HTML:
<p class="item-1">Text Line 1</p>
<p class="item-2">Text Line 2</p>
<p class="item-3">Text Line 3</p>
<p class="item-4">Text Line 4</p>
<p class="item-5">Text Line 5</p>
CSS:
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
font-family: 'Suez One';
font-size: 72px;
line-height: 80px;
color: white !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-shadow: 8px 8px 3px #000000;
position: absolute;
display: block;
width: 60%;
z-index: 1001;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.item-1{
-webkit-animation-name: anim-1;
animation-name: anim-1;
}
.item-2{
-webkit-animation-name: anim-2;
animation-name: anim-2;
}
.item-3{
-webkit-animation-name: anim-3;
animation-name: anim-3;
}
.item-4{
-webkit-animation-name: anim-4;
animation-name: anim-4;
}
.item-5{
-webkit-animation-name: anim-5;
animation-name: anim-5;
}
#-webkit-keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%, 25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#-webkit-keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
#keyframes anim-5 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
When posting this question I got an error message "It looks like your post is mostly code, please add more details" That's why I am typing this. Trying to have some more words so it will let me post this question. Thanks for your patience.
Here's a script that writes the animation on the fly, based on number of slides:
'use strict';
var slider = document.querySelector('.css-slider'),
slides = slider.querySelectorAll('p'),
css = '';
for (var i = 0; i < slides.length; i++) {
css += '.css-slider>*:nth-child(' + (i + 1) + '){animation-name:a-' + i + '}' + ('#keyframes a-' + i + '{') + ('0%,' + i * 100 / slides.length + '%{transform: translatex(-100%)}') + (i * 100 / slides.length + 25 / slides.length + '%,' + ((i + 1) * 100 / slides.length - 25 / slides.length) + '%{transform: translatex(0)}') + ((i + 1) * 100 / slides.length + '%,100%{transform: translatex(100%)}') + '}';
}
css += '.css-slider>*{animation-duration:' + slides.length * 4 + 's;';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
#import url('https://fonts.googleapis.com/css?family=Suez+One');
.css-slider > * {
font-family: 'Suez One';
font-size: 72px;
line-height: 55px;
color: white;
text-shadow: 5px 5px 3px rgba(0,0,0,.65);
position: absolute;
top: 0;
width: 100%;
text-align: center;
animation-timing-function: cubic-bezier(.4,0,.2,1);
animation-iteration-count: infinite;
}
.css-slider, .css-slider > *:last-child {
position: relative;
}
.css-slider {
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0;
overflow-x: hidden;
}
<div class="css-slider">
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
<p>Text Line 4</p>
<p>Text Line 5</p>
<p>Text Line 6</p>
<p>Text Line 7</p>
</div>
Note I changed your initial markup, as I wanted it to write a more general solution, not one tailored to your particular case.
But if you're only interested in the CSS for 5 items and you want to keep your markup here's what you're asking for:
.item-1 { -webkit-animation-name: a-0; animation-name: a-0 }
.item-2 { -webkit-animation-name: a-1; animation-name: a-1 }
.item-3 { -webkit-animation-name: a-2; animation-name: a-2 }
.item-4 { -webkit-animation-name: a-3; animation-name: a-3 }
.item-5 { -webkit-animation-name: a-4; animation-name: a-4 }
#-webkit-keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-0 {
0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-1 {
0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-2 {
0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-3 {
0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#-webkit-keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
#keyframes a-4 {
0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}
And the principle behind the keyframes is:
.item-${n+1} { animation-name: a-${n} }
#keyframes a-${n} {
0%, enterStart { left state ruleset }
enterEnd, leaveStart { center state ruleset }
leaveEnd, 100% { right state ruleset }
}
I'm working on a card flip animation using keyframes. Aside from the fact I need the origin of the animation to be in the middle, the card flips fine on hover. However, I need to "unflip" on hover off. Right now it's just resetting and not animating.
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipcard 1s 0s 1 normal forwards;
-moz-animation: flipcard 1s 0s 1 normal forwards;
animation: flipcard 1s 0s 1 normal forwards; }
I've created a jsfiddle to show what's happening
Dont use keyframe animation for hover effects Just removed #keyframe css rules and added it inside containers on hover so that it will automatically handles hover off effect!
Here is the code jSfiddle
for FullScreen jsFiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.oisqa-widget {
float: left;
width: 100%;
}
.oisqa-widget .flip-container {
height: 170px;
}
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2) rotateY(180deg);
}
.oisqa-widget .flip-container {
display: block;
float: left;
margin-right: 2.12766%;
width: 31.91489%;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
margin-right: 0;
}
.oisqa-widget .flipper {
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
}
.oisqa-widget .front,
.oisqa-widget .back {
position: absolute;
top: 0px;
left: 0px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 170px;
padding: 20px;
text-align: center;
width: 100%;
}
.oisqa-widget .front {
background: white;
border: 1px #c3c3c3 solid;
border-top: 5px #1c4295 solid;
transform: rotateY(0deg);
z-index: 2;
}
.oisqa-widget .back {
background: #1c4295;
border: 1px #c3c3c3 solid;
border-top: 5px #f4f4f4 solid;
color: white;
transform: rotateY(180deg);
}
.oisqa-widget .back strong {
color: white;
}
.oisqa-widget strong {
color: #1c4295;
}
<div class="oisqa-widget">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 1</p>
</div>
<div class="back">
<p class="question">answer 1</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 2</p>
</div>
<div class="back">
<p class="question">answer 2</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 3</p>
</div>
<div class="back">
<p class="question">answer 3</p>
</div>
</div>
</div>
</div>
This will seem a little convoluted so bear with me...
To get the desired effect I used 3 separate animations, 2 of which are the same as your current flipcard animation, so you'll end up with flipcard, flipcard2, and hideAnswer.
To get the flipcard animation to work in both directions you'll need to add flipcard2 to the initial state of .flipper, I know this seems odd, but the hover state and the initial state need to use animations with different names, you can't use the same animation and just flip the direction. So:
.oisqa-widget .flipper {
position: relative;
/*transition: 0.6s; remove this */
transform-style: preserve-3d;
-webkit-animation: flipcard2 1s 0s 1 reverse forwards;
-moz-animation: flipcard2 1s 0s 1 reverse forwards;
animation: flipcard2 1s 0s 1 reverse forwards;
/*note that flipcard and flipcard2 are the same but here the direction is reversed*/
}
Now just doing this will get your animation going in both directions, but your answers will show when the page first loads.
To prevent that you'll need to hide everything for the first second while the animation plays through on the initial state, hence the 3rd animation hideAnswer:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
animation: hideAnswer 1s;
}
#keyframes hideAnswer {
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity:1;}
}
Now put it all together and you'll get:
Working Example on jsFiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: hideAnswer 1s;
-o-animation: hideAnswer 1s;
-moz-animation: hideAnswer 1s;
animation: hideAnswer 1s;
}
#-o-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-moz-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes flipcard {
0% {
-webkit-transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2) rotateY(180deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
}
}
#-moz-keyframes flipcard {
0% {
-moz-transform: scale(1) rotateY(0);
}
50% {
-moz-transform: scale(2) rotateY(180deg);
}
100% {
-moz-transform: scale(1) rotateY(180deg);
}
}
#-o-keyframes flipcard {
0% {
-o-transform: scale(1) rotateY(0);
}
50% {
-o-transform: scale(2) rotateY(180deg);
}
100% {
-o-transform: scale(1) rotateY(180deg);
}
}
#keyframes flipcard {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(180deg);
}
}
#-webkit-keyframes flipcard2 {
0% {
-webkit-transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2) rotateY(180deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
}
}
#-moz-keyframes flipcard2 {
0% {
-moz-transform: scale(1) rotateY(0);
}
50% {
-moz-transform: scale(2) rotateY(180deg);
}
100% {
-moz-transform: scale(1) rotateY(180deg);
}
}
#-o-keyframes flipcard2 {
0% {
-o-transform: scale(1) rotateY(0);
}
50% {
-o-transform: scale(2) rotateY(180deg);
}
100% {
-o-transform: scale(1) rotateY(180deg);
}
}
#keyframes flipcard2 {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(180deg);
}
}
.oisqa-widget {
float: left;
width: 100%;
}
.oisqa-widget .flip-container {
height: 170px;
}
.oisqa-widget .flip-container {
display: block;
float: left;
margin-right: 2.12766%;
width: 31.91489%;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
margin-right: 0;
}
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipcard 1s 0s 1 normal forwards;
-moz-animation: flipcard 1s 0s 1 normal forwards;
animation: flipcard 1s 0s 1 normal forwards;
}
.oisqa-widget .flipper {
position: relative;
/*transition: 0.6s; remove this */
transform-style: preserve-3d;
-webkit-animation: flipcard2 1s 0s 1 reverse forwards;
-moz-animation: flipcard2 1s 0s 1 reverse forwards;
animation: flipcard2 1s 0s 1 reverse forwards;
}
.oisqa-widget .front, .oisqa-widget .back {
position: absolute;
top: 0px;
left: 0px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 170px;
padding: 20px;
text-align: center;
width: 100%;
}
.oisqa-widget .front {
background: white;
border: 1px #c3c3c3 solid;
border-top: 5px #1c4295 solid;
transform: rotateY(0deg);
z-index: 2;
}
.oisqa-widget .back {
background: #1c4295;
border: 1px #c3c3c3 solid;
border-top: 5px #f4f4f4 solid;
color: white;
transform: rotateY(180deg);
}
.oisqa-widget .back strong {
color: white;
}
.oisqa-widget strong {
color: #1c4295;
}
<div class="oisqa-widget">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 1</p>
</div>
<div class="back">
<p class="question">answer 1</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 2</p>
</div>
<div class="back">
<p class="question">answer 2</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 3</p>
</div>
<div class="back">
<p class="question">answer 3</p>
</div>
</div>
</div>
</div>
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo