I currently have a blob in the background of my website and I'd like to morph it and make it interactive as the user scrolls down the page, what can I add to do this? ATM, the blob is animated but not on scroll.
Here is the html
<div class="morph-wrap">
<svg class="morph" width="1400" height="770" viewBox="0 0 1400 770">
<path
d="M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z" />
</svg>
</div>
Here is the css
/* SVG Morph */
.morph-wrap {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.morph {
position: relative;
height: 100%;
fill: rgb(33, 33, 33);
flex: none;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
transform: scale(1) translate(10px, -30px);
}
38% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
}
40% {
transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
}
78% {
transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
}
80% {
transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
}
100% {
transform: scale(1) translate(10px, -30px);
}
}
Related
I have two animations called slide and bounce-return which both should be playing with 0 delay and 1s duration. Due to what I suspect is some kind of race condition in animation processing logic, these animations are out of sync by 1 frame regardless of animation speed or refresh rate. How can I stop these circles from jumping in and out?
(If you don't see any problem right away, view the snippet in full page or open the developer tools.)
.items {
--var-circle-size: 16px;
--var-circle-space: 8px;
--var-circle-border: solid red;
--var-circle-border-width: 0px;
--var-circle-shadow: 3px 2px 4px -1px rgba(0, 0, 0, 0.4);
--var-circle-shadow-high: 6px 4px 6px -2px rgba(0, 0, 0, 0.2);
--var-circle-count: 5;
--var-anim-bounce-func: cubic-bezier(0.7, 0.1, 0.6, 1.6);
--var-anim-time-unit: calc(1s);
--var-anim-color-cycle-time: calc(var(--var-circle-count)*var(--var-anim-time-unit));
--var-anim-color-cycle-func: steps(1);
--var-anim-color-1: #6db;
--var-anim-color-2: #be4;
--var-anim-color-3: #ec5;
--var-anim-color-4: #d86;
--var-anim-color-5: #f8c;
--var-anim-slide-time: var(--var-anim-time-unit);
--var-anim-slide-func: linear;
--var-circle-size-space: calc(var(--var-circle-size) + var(--var-circle-space));
--var-anim-slide-amount: calc(var(--var-circle-size-space)/2);
--var-anim-slide-start: calc(-1*var(--var-anim-slide-amount));
--var-anim-slide-end: var(--var-anim-slide-amount);
}
.maximized {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.items {
font-size: 0;
white-space: nowrap;
user-select: none;
pointer-events: none;
margin-right: calc(-1*var(--var-circle-space) - var(--var-circle-size-space));
animation: slide var(--var-anim-slide-time) var(--var-anim-slide-func) infinite;
}
.circle {
width: var(--var-circle-size);
height: var(--var-circle-size);
border-radius: 100%;
box-shadow: var(--var-circle-shadow);
display: inline-block;
margin: 0;
margin-right: var(--var-circle-space);
box-sizing: border-box;
border: var(--var-circle-border);
border-width: min(var(--var-circle-border-width), calc(var(--var-circle-size)/2));
background-color: var(--var-anim-bgcolor);
--var-color-cycle-anim: anim-color-cycle var(--var-anim-color-cycle-time) var(--var-anim-color-cycle-func) calc(var(--var-anim-delay-fact)*var(--var-anim-time-unit)) infinite;
animation: var(--var-color-cycle-anim);
}
#keyframes anim-color-cycle {
0% {
--var-anim-bgcolor: var(--var-anim-color-1);
}
20% {
--var-anim-bgcolor: var(--var-anim-color-2);
}
40% {
--var-anim-bgcolor: var(--var-anim-color-3);
}
60% {
--var-anim-bgcolor: var(--var-anim-color-4);
}
80% {
--var-anim-bgcolor: var(--var-anim-color-5);
}
100% {
--var-anim-bgcolor: var(--var-anim-color-1);
}
}
#keyframes slide {
0% {
transform: translate(var(--var-anim-slide-start), 0);
}
100% {
transform: translate(var(--var-anim-slide-end), 0);
}
}
#keyframes bounce-inout {
40%,
60% {
transform: translate(0, var(--var-anim-bounce-inout-fact));
box-shadow: var(--var-circle-shadow-high);
}
}
#keyframes bounce-return {
10% {
left: 0;
}
90%,
100% {
left: var(--var-anim-bounce-return-amount);
}
}
#keyframes bounce-inout-fact-alternate {
0% {
--var-anim-bounce-inout-fact: calc(-1*var(--var-circle-size-space));
}
50% {
--var-anim-bounce-inout-fact: var(--var-circle-size-space);
}
}
.circle:nth-child(1) {
--var-anim-delay-fact: -4;
}
.circle:nth-child(2) {
--var-anim-delay-fact: -3;
}
.circle:nth-child(3) {
--var-anim-delay-fact: -2;
}
.circle:nth-child(4) {
--var-anim-delay-fact: -1;
}
.circle:nth-child(5) {
--var-anim-delay-fact: -0;
}
.circle:last-child {
--var-anim-bounce-inout-fact: calc(-1*var(--var-circle-size-space));
--var-anim-bounce-return-amount: calc(-1 * var(--var-circle-count) * var(--var-circle-size-space));
position: relative;
animation: var(--var-color-cycle-anim), bounce-inout var(--var-anim-time-unit) var(--var-anim-bounce-func) infinite, bounce-return var(--var-anim-time-unit) ease-in-out infinite, bounce-inout-fact-alternate calc(2*var(--var-anim-time-unit)) steps(1) infinite;
}
<div class="maximized container">
<div class="items">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
I have a theory that combining everything into one set of keyframes for each circle, rather than try to synchronise an animation on items with the circle animations, might help remove the problem with phasing.
To test it here's a snippet that roughly reproduces the action of the given code. In it the items div is not animated. Each circle keeps its original color and is animated to the right, up, back, to the right, down, back - with little bounces at each end.
No 'flashing/shadowing' has been observed. Also the amount of processing being done is less.
On the code in the question my laptop was showing an average of around 5% cpu and 15% gpu usage. On this snippet they are around 1.5% and 11.5% respectively.
.items {
--size: 16px;
--space: 8px;
--border: solid red;
--border-width: 0px;
--shadow: 3px 2px 4px -1px rgba(0, 0, 0, 0.4);
--shadow-high: 6px 4px 6px -2px rgba(0, 0, 0, 0.2);
--count: 5;
--bounce-func: cubic-bezier(0.7, 0.1, 0.6, 1.6);
--time-unit: calc(1s);
--cycle-time: calc(2 * var(--count)*var(--time-unit));
--color-cycle-func: steps(1);
--color-1: #6db;
--color-2: #be4;
--color-3: #ec5;
--color-4: #d86;
--color-5: #f8c;
--slide-time: var(--time-unit);
--slide-func: linear;
}
.maximized {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.items {
font-size: 0;
white-space: nowrap;
user-select: none;
pointer-events: none;
width: calc((var(--size) + var(--space)) * var(--count));
height: var(--size);
position: relative;
}
.circle {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 100%;
box-shadow: var(--shadow);
display: inline-block;
margin: 0;
margin-right: var(--space);
box-sizing: border-box;
border: var(--border);
border-width: min(var(--border-width), calc(var(--size)/2));
animation: bounceround infinite var(--cycle-time) var(--slide-func);
animation-delay: var(--delay);
background-color: var(--color);
}
.circle:nth-child(1) {
--color: var(--color-1);
--delay: -8s;
}
.circle:nth-child(2) {
--color: var(--color-2);
--delay: -6s;
}
.circle:nth-child(3) {
--color: var(--color-3);
--delay: -4s;
}
.circle:nth-child(4) {
--color: var(--color-4);
--delay: -2s;
}
.circle:nth-child(5) {
--color: var(--color-5);
--delay: 0s;
}
#keyframes bounceround {
0% {
}
36.6666% {
transform: translateX(calc(var(--count) * 100%)); /* move to the right */
}
40% {
transform: translateX(calc((var(--count) - 0.5) * 100%)) translateY(calc(-100% - var(--size))); /* go up a bit */
}
41% {
transform: translateX(calc((var(--count) - 1) * 100%)) translateY(calc(-100% - (var(--size) / 2))); /* come down a fraction */
}
45% {
transform: translateX(0) translateY(-100%); /* move to the left */
}
49% {
transform: translateX(0) translateY(calc(var(--size) / 4)); /* jump down a bit*/
}
50% {
transform: translateX(0) translateY(0); /* go down to start position */
}
86.6666% {
transform: translateX(calc(var(--count) * 100%)); /* move to the right */
}
90% {
transform: translateX(calc((var(--count) - 0.5) * 100%)) translateY(calc(100% + var(--size))); /* go down a bit */
}
91% {
transform: translateX(calc((var(--count) - 1) * 100%)) translateY(calc(100% + calc(var(--size) / 2))); /* go up a fraction */
}
95% {
transform: translateX(0) translateY(100%); /* move to the left */
}
99% {
transform: translateX(0) translateY(calc(-1 * var(--size) / 4)); /* jump up a bit */
}
100% {
transform: translateX(0) translateY(0); /* back to where we started */
}
}
<div class="maximized container">
<div class="items">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
Possible workaround: Add duplicate version of circles just with color-cycle and no moving animation and have them overlap with original one, and swap visibility of it for just a few millis when the animation iteration is about to restart.
I tested with the following answers:
Pure CSS rotate animation broken while in infinite loop
Stop infinite CSS3 animation and smoothly revert to initial state
CSS Image Fade Animation Only Runs First Time,
but the animation duration and timeline (for example, from step by step, from start to end) did not work. The three images need to be in the same place at once.
I wanted to use https://codepen.io/jay-bee-why/pen/Htejl, but unfortunately I do not want to use jQuery. I am CSS and JavaScript purist.
An image is worth a thousand words. You will understand easily the image. I also provide very small snippet code box.
.flipping-images
{
align-items: center;
display: flex;
flex-flow: row nowrap;
height: 80%;
justify-content: center;
/* opacity: 0; */
position: relative;
transform: translateX(100%);
width: 22%;
}
.show-l
{
animation: show-image 5s ease-in-out 300ms infinite;
left: 0;
position: absolute;
transform-origin: left;
}
.hide-l
{
animation: hide-image 5s ease-in-out 800ms infinite;
position: absolute;
transform-origin: left;
}
.hide-l2
{
animation: hide-image 5s ease-in-out 600ms infinite;
position: absolute;
transform-origin: right;
}
#keyframes hide-image
{
0%
{
left: 0;
transform: rotateY(0deg);
}
30%
{
left: 10%;
transform: rotateY(0deg);
}
50%
{
opacity: 1;
}
100%
{
left: -100%;
opacity: 0;
transform: rotateY(90deg);
}
}
#keyframes show-image
{
0%
{
left: 100%;
transform: rotateY(90deg);
}
30%
{
left: 110%;
transform: rotateY(90deg);
}
100%
{
left: 0%;
transform: rotateY(0deg);
}
}
<div class="flipping-images">
<img class="show-l" src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
<img class="hide-l2" src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
<img class="hide-l" src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
</div>
I'm not sure I understand your image since it says the second image should disappear but it also says the animation is infinite. I hope it's working as you intended, if not just leave a comment on what needs to be fixed.
I'm using the animationend event to control the animations.
var counter = 1;
var div = document.querySelector('.flipping-images');
var images = document.querySelectorAll('.flipping-images img');
var showNext = function () {
counter++;
if (counter > 3) counter = 1;
div.classList.remove('image1', 'image2', 'image3')
div.classList.add('image'+counter);
};
for (var img of images) {
img.addEventListener('animationend', showNext);
img.addEventListener('click', showNext);
}
document.querySelector('#next').addEventListener('click', showNext);
.flipping-images {
perspective: 300px;
}
.flipping-images img {
display: none;
animation: rotate 5s linear 1;
}
.flipping-images.image1 img:nth-child(1),
.flipping-images.image2 img:nth-child(2),
.flipping-images.image3 img:nth-child(3) {
display: block;
}
.flipping-images.image2 img:nth-child(2) {
animation: rotate 5s linear infinite;
}
#keyframes rotate {
0% { transform: rotateY(-45deg); }
100% { transform: rotateY(45deg); }
}
button {
margin: 1em;
}
<div class="flipping-images image1">
<img src="https://via.placeholder.com/100x100/fdc34f/FEFEFE?text=1">
<img src="https://via.placeholder.com/100x100/3e72ff/FEFEFE?text=2">
<img src="https://via.placeholder.com/100x100/222222/FEFEFE?text=3">
</div>
<button id="next">Next</button>
I want to create an animation showing a few circles moving one after another in orbit. Currently, I created three circles but they appear on separate lines and thus move in a circular movement, but as a line. How can I change the code to achieve the movement that I want? Here's a codepen with the current status.
Here's the code that I use:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
.loader {
height: 50px;
animation: rotate 6s linear infinite;
}
.circle {
display: inline-block;
background-color: purple;
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1.5s linear infinite;
margin: -20p;
}
.circle:nth-child(2) {
background-color: palevioletred;
transform: scale(0);
animation-delay: 0.20s;
}
#keyframes rotate {
to {
transform: rotate(360deg)
}
}
#keyframes grow {
50% {
transform: scale(1);
}
}
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
I'm creating full-size "plates" which I can set to an initial rotation point. The circles end up as pseudo-elements on the plates (to avoid extra markup). Modify the initial rotation values to bring the circles closer together.
.loader {
width: 100px;
height: 100px;
animation: rotate 6s linear infinite;
position: relative;
}
.plate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.plate:nth-child(2) {
transform: rotate(120deg);
}
.plate:nth-child(3) {
transform: rotate(240deg);
}
.plate:before {
content: '';
position: absolute;
background-color: red;
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1.5s linear infinite;
}
.plate:nth-child(2):before {
background: green;
}
.plate:nth-child(3):before {
background: blue;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
#keyframes grow {
50% {
transform: scale(1);
}
}
* {
box-sizing: bordr-box;
margin: 0;
padding: 0;
}
body {
font-family: "Lato", sans-serif;
font-size: 18px;
line-height: 1.6;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
<body>
<div class="loader">
<div class="plate"></div>
<div class="plate"></div>
<div class="plate"></div>
</div>
</body>
#isherwood provided a great solution that's easily workable in most modern browsers. But let's say you want more complex motion, like an elliptical orbit.
SVG Animation
You could build the whole thing into an SVG since that supports lots of cool animation while being quite performant. But building SVGs and animating them from scratch is kinda complicated. Luckily, there are tools to help. Here's a few examples: Snapsvg (code library), SVGGator (Web-based animation tool) or Bodymovin (After Effects workflow).
But let's say you want to stick with what can be done in HTML/CSS.
CSS Motion Path
Sadly support is, not great as of Summer 2019 but it will likely be improving. If your audience is using the right browsers (Chrome, Opera, Edge or Chromium based mobile browsers). It's actually pretty easy to use but there are some gotchas. For example, it appears that only the path() property works right now. So you can't use shape keywords like circle() or ellipse() though they're in the spec.
main {
position: relative;
margin: 20px;
}
main,svg {
width: 100px;
height: 100px;
}
path {
stroke-width: 1px;
}
svg {
position:absolute;
opacity: 0.5;
}
#c1 {
stroke: red;
}
#c2 {
stroke: blue;
}
#c3 {
stroke: green;
}
div[class*="c"] {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
.c1 {
background-color: red;
offset-path: path('M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z');
animation: moveme 5s ease-in-out infinite;
}
.c2 {
background-color: blue;
offset-path: path('M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z');
animation: moveme 5.25s linear infinite;
}
.c3{
background-color: green;
offset-path: path('M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z');
animation: moveme 5.5s linear infinite;
}
#keyframes moveme {
100% {
motion-offset: 100%;
offset-distance: 100%;
}
}
<main>
<!-- paths for example -->
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="orbit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z" id="c1"></path>
<path d="M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z" id="c2"></path>
<path d="M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z" id="c3"></path>
</g>
</svg>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</main>
The following pure css slider is working well, but I need to make it responsive. I've tried replacing the pixel-based sizes with percentages and with vw, but it doesn't line up. I'd be grateful for any ideas.
Here's the html:
<section class="slideshow">
<div class="slideshow-container slide">
<img src="images/anim/home-animation1.jpg" alt="pills">
<img src="images/anim/home-animation2.jpg" alt="scientist">
<img src="images/anim/home-animation3.jpg" alt="chemical structure">
<img src="images/anim/proudmembermassbio.jpg" alt="proud member of MassBio"> </div>
</section>
And the css:
/*general styles*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
/* SLIDESHOW STYLES */
.slideshow-container {
width: 1400px; /* the entire "stage" */
font-size: 0;
transition: 1s ease;
height: 315px;
}
.slideshow-container:hover { animation-play-state: paused; }
.slideshow { /* the visible "stage" */
width: 350px;
margin: 1rem auto -1rem;
overflow: hidden;
border: solid 1px white;
}
img, .text-container {
width: 350px;
height: auto;
display: inline-block;
font-size: 16px;
text-align: center;
}
.text-container { /* for text slides */
height: 195px;
position: relative;
}
.slide { animation: slide 10s ease infinite; }
#keyframes slide {
0% { transform: translateX(0%); }
12.5% { transform: translateX(0%); }
25% { transform: translateX(-25%); }
37.5% { transform: translateX(-25%); }
50% { transform: translateX(-50%); }
62.5% { transform: translateX(-50%); }
75% { transform: translateX(-75%); }
87.5% { transform: translateX(-75%); }
99% { transform: translateX(-75%); }
100% { transform: translateX(0); }
}
.p {
margin-top: 140px;
text-align: center;
}
Maybe this is too late for the user that posted this question, but can be helpful for someone else that want a pure responsive CSS slider.
I have created a working example in this CodePen that is working as requested using percentages for widths and in the animation, and for this reason it is responsive and works really well in each resolutions.
All the main solution to have the responsiveness is here:
slider__container {
display: flex;
position: relative;
animation: 30s slide infinite;
font-size: 0;
width: 1000%; /* because I am using 10 slides */
}
The width should be calculated accordingly to how many slides are there in the slider: slides x 100% (slides times 100%, in my example 1000%).
I've got an css keyframe animation set on a background div with a lot of going on—3d transformations, opacity, color, etc. The animation worked perfectly fine in Chrome a couple months ago, but doesn't seem to work now. It still works great in Safari.
Essential code related to the problem below; full code/live site here; *note that the transformation is overtaking by mouse movement as well(this works fine in Chrome + Safari).
Sry, please don't hate me for my poop and sexytime naming conventions ;)
HTML
<div class="background-container" id="poop">
<div class="background-movement">
</div>
</div>
<script>
var element = document.getElementById('poop');
document.addEventListener('mousemove', function (e) {
var transform = 'rotateX('+e.pageY*.05+'deg) rotateY('+e.pageX*.02+'deg)';
element.style.webkitTransform = transform;
element.style.transform = transform;
}, false);
</script>
CSS
.background-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.background-movement {
background-image: url(../img/bg.png);
z-index: 100;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-repeat: repeat;
background-size: 500px;
-webkit-animation: sexytime 60s ease-in-out 0 infinite alternate;
animation: sexytime 60s ease-in-out 0 infinite alternate;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#-webkit-keyframes sexytime {
0% {
opacity: 1;
-webkit-filter: hue-rotate(0deg) brightness(.8);
-webkit-transform-origin: left;
-webkit-transform:scale(1) rotate3d(10, 0, 0, 20deg);
}
20%{
-webkit-transform:scale(1.3) rotate3d(20, 30, -10, 40deg);
}
40% {
opacity: .9;
-webkit-filter: hue-rotate(60deg) brightness(1);
}
50% {
opacity: .8;
-webkit-filter: hue-rotate(300deg) brightness(1.3);
-webkit-transform-origin: top;
-webkit-transform:scale(1.3) rotate3d(70, 10, 30, -10deg);
}
60% {
opacity: 1;
-webkit-transform:scale(1.3) rotate3d(10, -40, 0, 30deg);
}
80% {
opacity: .9;
-webkit-filter: hue-rotate(-30deg) brightness(1.3);
-webkit-transform:scale(1.3) rotate3d(20, 30, -20, 30deg);
}
100% {
opacity: 1;
-webkit-filter:hue-rotate(120deg) brightness(1);
-webkit-transform-origin: bottom;
-webkit-transform:scale(.9) rotate3d(30, -10, 50, 20deg);
}
}
#keyframes sexytime {
0% {
opacity: 1;
filter: hue-rotate(0deg) brightness(.8);
transform-origin: left;
transform:scale(1) rotate3d(10, 0, 0, 20deg);
}
20%{
transform:scale(1.3) rotate3d(20, 30, -10, 40deg);
}
40% {
opacity: .9;
filter: hue-rotate(60deg) brightness(1);
}
50% {
opacity: .8;
filter: hue-rotate(300deg) brightness(1.3);
transform-origin: top;
transform:scale(1.3) rotate3d(70, 10, 30, -10deg);
}
60% {
opacity: 1;
transform:scale(1.3) rotate3d(10, -40, 0, 30deg);
}
80% {
opacity: .9;
filter: hue-rotate(-30deg) brightness(1.3);
transform:scale(1.3) rotate3d(20, 30, -20, 30deg);
}
100% {
opacity: 1;
filter:hue-rotate(120deg) brightness(1);
transform-origin: bottom;
transform:scale(.9) rotate3d(30, -10, 50, 20deg);
}
}