How to use CSS \cubic-bezier to implement sine function?

How to use CSS \cubic-bezier to implement sine function? - javascript

I'm going to implement CSS width animation in sine function like:
But with cubic-bezier, I can only set four parameters like transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275);.
Is it position to achieve this using CSS animation? Or else how to do this in JS?

You can imitate sine function using cubic-bezier()
Have a look at this resource for sine approximation: Sine approximation using cubic Bézier curves
Using 4 keyframes and cubic-bezier() with values:
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
cubic-bezier(0,0,0.3642,1)
cubic-bezier(0.6358,0,1,1)
will move an object with sine function trajectory.
I made a demo for your case. Pure CSS solution, please have a look:
DEMO
.box {
width: 20px;
height: 20px;
background-color: royalblue;
animation-fill-mode: forwards;
animation:
sine1-1 0.3s 1 0s cubic-bezier(0,0,0.3642,1),
sine1-2 0.3s 1 0.3s cubic-bezier(0.6358,0,1,1),
sine1-3 0.3s 1 0.6s cubic-bezier(0,0,0.3642,1),
sine1-4 0.3s 1 0.9s cubic-bezier(0.6358,0,1,1),
sine2-1 0.3s 1 1.2s cubic-bezier(0,0,0.3642,1),
sine2-2 0.3s 1 1.5s cubic-bezier(0.6358,0,1,1),
sine2-3 0.3s 1 1.8s cubic-bezier(0,0,0.3642,1),
sine2-4 0.3s 1 2.1s cubic-bezier(0.6358,0,1,1),
sine3-1 0.3s 1 2.4s cubic-bezier(0,0,0.3642,1),
sine3-2 0.3s 1 2.7s cubic-bezier(0.6358,0,1,1);
}
#keyframes sine1-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-100px)}
}
#keyframes sine1-2 {
0% {transform: translateY(-100px)}
100% {transform: translateY(0)}
}
#keyframes sine1-3 {
0% {transform: translateY(0)}
100% {transform: translateY(80px)}
}
#keyframes sine1-4 {
0% {transform: translateY(80px)}
100% {transform: translateY(0)}
}
#keyframes sine2-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-60px)}
}
#keyframes sine2-2 {
0% {transform: translateY(-60px)}
100% {transform: translateY(0)}
}
#keyframes sine2-3 {
0% {transform: translateY(0)}
100% {transform: translateY(40px)}
}
#keyframes sine2-4 {
0% {transform: translateY(40px)}
100% {transform: translateY(0)}
}
#keyframes sine3-1 {
0% {transform: translateY(0)}
100% {transform: translateY(-20px)}
}
#keyframes sine3-2 {
0% {transform: translateY(-20px)}
100% {transform: translateY(0)}
}
.horizontal {
animation: move-horizontal 3s 1 linear;
}
#keyframes move-horizontal {
0% {transform: translateX(0)}
100% {transform: translateX(400px)}
}
.wrap {
background-color: #bfbfbf;
}
.margin {
width: 100px;
height: 100px;
}
<div class="margin"></div>
<div class="wrap">
<div class="horizontal">
<div class="box"></div>
</div>
</div>

Related

How to create spinning animation in CSS? [duplicate]

I want to make a rotation of my loading icon by CSS.
I have an icon and the following code:
<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}
.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
<div id='test' class='rotating'></div>
But it doesn't work. How can the icon be rotated using CSS?

#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>

Working nice:
#test {
width: 11px;
height: 14px;
background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>

Infinite rotation animation in CSS
/* ENDLESS ROTATE */
.rotate{
animation: rotate 1.5s linear infinite;
}
#keyframes rotate{
to{ transform: rotate(360deg); }
}
/* SPINNER JUST FOR DEMO */
.spinner{
display:inline-block; width: 50px; height: 50px;
border-radius: 50%;
box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
MDN - Web CSS Animation

Without any prefixes, e.g. at it's simplest:
.loading-spinner {
animation: rotate 1.5s linear infinite;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}

Works in all modern browsers
.rotate{
animation: loading 3s linear infinite;
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}

#keyframes rotate {
100% {
transform: rotate(1turn);
}
}
div{
animation: rotate 4s linear infinite;
}

Simply Try This. Works fine
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#loading {
width: 16px;
height: 16px;
-webkit-animation: loading 2s linear infinite;
-moz-animation: loading 2s linear infinite;
}
<div class="loading-test">
<svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

Rotation on add class .active
.myClassName.active {
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<style>
div
{
height:200px;
width:200px;
-webkit-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

the easiest way to do it is using font awesome icons by adding the "fa-spin" class. for example:
<i class="fas fa-spinner fa-3x fa-spin"></i>
you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners
here you have the documentation from font awesome:
https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

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>

Separate properties for different animations on same object

I am trying to move two wheel images towards each other using the following code:
HTML:
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</body>
CSS:
body{
background:#fff;
}
body > img{
width:200px;
}
.leftwheel {
float:left;
-webkit-animation: rotationLeft 2s infinite linear;
animation: rotationLeft 2s infinite linear;
-moz-animation: rotationLeft 2s infinite linear;
}
#-webkit-keyframes rotationLeft {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);margin-left:25%;}
}
#-moz-keyframes rotationLeft {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);margin-left:25%;}
}
#keyframes rotationLeft {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);margin-left:25%;}
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
animation: rotationRight 2s infinite linear;
-moz-animation: rotationRight 2s infinite linear;
}
#-webkit-keyframes rotationRight {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
#-moz-keyframes rotationRight {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(-359deg);margin-right:25%;}
}
#keyframes rotationRight {
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);margin-right:25%;}
}
DEMO
Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?

Try wrapping your images in divs, and applying your second animation to the wrapping divs. Include forwards (for animation-fill-mode) in your animation shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) to make the element holds its final position (rather than resetting to its initial position).
Update:
Based on your comment below that the wheels should collide, I would nix the floats and positioning by margin, and would instead position by absolute. Note that (if I understand what you want), the to positions would probably need to be stated by calc(), which is newer technology but mostly supported (http://caniuse.com/#search=calc). Also, your image file includes padding, which you might want to crop in an image editor, or you could reverse in your CSS.
WORKING DEMO (refresh page to repeat animation): http://jsbin.com/jifup/4
CSS:
#-webkit-keyframes translationLeft {
from { left: 0%; }
to { left: calc(50% - 170px); }
}
#-webkit-keyframes translationRight {
from { right: 0%; }
to { right: calc(50% - 170px); }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
position: absolute;
margin: -18px;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
position: absolute;
margin: -18px;
}
.leftwheel {
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
-webkit-animation: rotationRight 2s infinite linear;
}
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
PREVIOUS ANSWER CODE:
WORKING DEMO (refresh page to see animation again and again): http://jsbin.com/jifup/1
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
CSS:
#-webkit-keyframes translationLeft {
from { margin-left: 0; }
to { margin-left: 25%; }
}
#-webkit-keyframes translationRight {
from { margin-right: 0; }
to { margin-right: 25%; }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
}
.leftwheel {
float: left;
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
}

Firefox will not update changes to CSS Animation

I am working on a site that is using css animations and I am having some trouble with firefox.
In some instances it seems like firefox is not reading the updated css file and in other places the css updates. I have tried a few things to clear the cache and did a hard reload to see if the changes in the css would reflect on the site. I went as far as to uninstall and reinstall firefox. Here is what I have encountered. The keyframe animation works perfectly in chrome and safari so far (been avoiding IE headaches). I noticed in testing firefox shows one of the text elements about 100px above where it should be. All the values are the same across the browser specific code. The strange part is if I try and change any of the values using firefox prefix it does not change. Say original top is set to 10px and I will change it to 500px, firefox will render it at the same position as 10px. Another reason I thought this might be an issue with firefox not reloading the css file is that I tried commenting off the entire section that animates the text and it will still animate as if I did not comment the code out. In the other browsers the commented animation would simply not animate. I did another test by changing the a text color to red instead of white and that change actually updated.
Additionally I use javascript to reverse the animation by removing the class and replacing it with a reverse animation class. These work fine in chrome and safari as well, but only one of the animated elements works in reverse, but does not change the animation delay to zero in the firefox code.
I could use a fresh pair of eyes to see what exactly going on.
Thanks for your help.
Here is the jsfiddle link. I can add screenshots if that helps but the jsfiddle is probably the easiest to see what I am talking about.
http://jsfiddle.net/JustALittleHeat/A5gMJ/1/
HTML
<body>
<div id= "aboutWrapper">
<div id= "quoteContainer">
<div id="quoteButton" class= "quoteButton" onclick="changeClass()"
onmouseover="mouseOver()" onmouseout="mouseOut()">-</div>
<h1 id="quotationMarks1" class="quotationMarks1">"</h1>
<p id ="quote" class ="quote"><em><strong>&nbsp &nbsp &nbsp &nbsp THE BETTER THE
PEOPLE YOU SURROUND YOURSELF WITH, THE BETTER YOU'RE GOING TO DO, FOR YOURSELF AND THE
CONSUMER.</strong></em></p><h1 id="quotationMarks2" class="quotationMarks2">"</h1> <h2
id="cecil" class="cecil">- Cecil Van Tuyl</h2>
</div>
<div id="aboutContainer" class="aboutContainer">
<h1 class="pageParaHeader">About Us</h1>
<p class="textBody"><strong class="dropCap">V</strong>&nbsp &nbsp &nbsp &nbsp an
Tuyl Group, Inc. provides management consulting <br> &nbsp &nbsp &nbsp &nbsp services
to the largest group of privately held automotive dealerships in the United States. With
offices in Arizona, Kansas, and Texas, the management consulting group works with
approximately seventy independently operated dealerships nationwide.<br> <br> &nbsp
&nbsp &nbsp &nbsp The Van Tuyl family has had a long history with the automotive
industry, starting with Cecil Van Tuyl and a Kansas City Chevrolet dealership in 1955.
Joined by his son Larry in 1971, they have built a world class management consulting
company based on the principles of hiring the right people and giving their dealership
clients the right tools, training and support they need to succeed.</p>
</div>
</div>
</body>
CSS
/*-------------Style Quote Block. NOT IE VERION-----------------------------*/
#aboutWrapper { position:relative; height:400px; width:100%; max-width:800px; margin-right:auto; margin-left:auto;
}
#quoteContainer {position:absolute; padding-left:20px; margin-left:auto; margin-right:auto; width:800px; height:200px;
}
.quoteButton {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0;
}
.quoteButtonMin {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:0; color:#069ec7; font-size: 3em; line-height: 15px;
-webkit-animation: buttonMin 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMin 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMin 1s ease-in-out;
animation-fill-mode: forwards;
}
.quoteButtonMin:hover {color:#3ccaf0;}
.quote {position:absolute; width:800px; color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px;
-webkit-animation: quoteMove 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: quoteMove 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: quoteMove 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.quotationMarks1 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;
-webkit-animation: markMove1 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove1 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.quotationMarks2 {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;
-webkit-animation: markMove2 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.cecil {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;
-webkit-animation: cecilMove 2s ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMove 2s ease-in-out;
-moz-animation-delay:4s;
-moz-animation-fill-mode: forwards;
animation: markMove2 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
/*--------------------------------------Button Minimize--------------------*/
#-webkit-keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
#-moz-keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
#keyframes buttonMin {
0% {opacity:0; width:10px;}
100%{opacity:1; width:10px;}
}
/*-----------------------------------Quote Animation------------------*/
#-webkit-keyframes quoteMove {
0% {-webkit-transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {-webkit-transform:scale(0,0);opacity:0;}
100% {-webkit-transform:scale(0,0);opacity:0;}
}
#-moz-keyframes quoteMove {
0% {-moz-transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {-moz-transform:scale(0,0);opacity:0;}
100% {-moz-transform:scale(0,0);opacity:0;}
}
#keyframes quoteMove {
0% {transform:scale(1,1);opacity:1;}
45% {opacity:1;}
50% {transform:scale(0,0);opacity:0;}
100% {transform:scale(0,0);opacity:0;}
}
/*--------------------------Quotation Marks 1------------------------------*/
#-webkit-keyframes markMove1 {
0% {left:10px; top:103; -webkit-transform: scale(1,1);}
50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
90% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}
#-moz-keyframes markMove1 {
0% {left:10px; top:103; -moz-transform: scale(1,1);}
50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
90% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
}
#keyframes markMove1 {
0% {left:10px; top:103; transform: scale(1,1);}
50% {left:325px;top:-50px;transform: scale(1,1);}
90% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
100% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
}
/*-------------------------Quotation Marks 2----------------------------*/
#-webkit-keyframes markMove2 {
0% {left:696px; top:-15;-webkit-transform: scale(1,1);}
50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
90% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
100% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
}
#-moz-keyframes markMove2 {
0% {left:696px; top:-15;-moz-transform: scale(1,1);}
50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
90% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
100% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
}
#keyframes markMove2 {
0% {left:696px; top:-15; transform: scale(1,1);}
50% {left:395px;top:-50px; transform: scale(1,1);}
90% {left:30px;top:-50px; transform: scale(0.45,0.45);}
100% {left:30px;top:-160px; transform: scale(0.45,0.45);}
}
/*-----------------------------Cecil Move-------------------*/
#-webkit-keyframes cecilMove {
0% {left:340px; top:120px; -webkit-transform: scale(1,1); }
25% {left:490px;top:120px; -webkit-transform: scale(1,1);}
50% {left:490px;top:40px; -webkit-transform: scale(1,1);}
90% {left:-30px;top:63px; -webkit-transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; -webkit-transform: scale(0.35,0.35);}
}
#keyframes cecilMove {
0% {left:340px; top:120px; transform: scale(1,1); }
25% {left:490px;top:120px; transform: scale(1,1);}
50% {left:490px;top:40px; transform: scale(1,1);}
90% {left:-30px;top:63px; transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; transform: scale(0.35,0.35);}
}
#-moz-keyframes cecilMove {
0% {left:340px; top:120px; -moz-transform: scale(1,1); }
25% {left:490px;top:120px; -moz-transform: scale(1,1);}
50% {left:490px;top:40px; -moz-transform: scale(1,1);}
90% {left:-30px;top:63px; -moz-transform: scale(0.35,0.35);}
100% {left:-30px;top:-45px; -moz-transform: scale(0.35,0.35);}
}
/*-------------------- Reverse Animation Classes-------------*/
.quoteR {position:absolute; width:800px; color:white; font-size:2em; font-family:"Arial", sans-serif; top:15px; right:0px;
-webkit-animation: quoteMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .45s;
-moz-animation: quoteMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: .45s;
animation: quoteMove 2.5s ease-in-out;
animation-fill-mode: forwards;
animation-delay: .45s;
}
.quoteButtonMinR {position:absolute; width:200px; height:30px;top:5px; z-index: 5; cursor:pointer; opacity:1; color:#069ec7; font-size: 3em; line-height: 15px;
-webkit-animation: buttonMinR 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: buttonMinR 1s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: buttonMinR 1s ease-in-out;
animation-fill-mode: forwards;
}
.quotationMarks1R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em; top:-103px; left:10px;
-webkit-animation: markMove1R 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove1R 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove1R 2.5s ease-in-out;
animation-fill-mode: forwards;
}
.quotationMarks2R {position:absolute; color:#069ec7; font-family:Arial, sans-serif; font-size:10em;
left:696px; top:-15px;
-webkit-animation: markMove2R 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: markMove2R 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out;
animation-fill-mode: forwards;
}
.cecilR {position:absolute; width:375px; color:white; font-family:Arial, sans-serif; font-size:3em; top:120px; left:340px;
-webkit-animation: cecilMoveR 2.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation: cecilMoveR 2.5s ease-in-out;
-moz-animation-fill-mode: forwards;
animation: markMove2 2.5s ease-in-out;
animation-fill-mode: forwards;
}
/*-----------------------------Button Animation Reverse--------------------*/
#-webkit-keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
#-moz-keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
#keyframes buttonMinR {
0%{opacity:1; width:10px;}
100% {opacity:0; width:10px;}
}
/*--------------------------------Quote Reverse-----------------------------------*/
#-webkit-keyframes quoteMoveR {
0% {-webkit-transform:scale(0,0);opacity:0;}
50% {-webkit-transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {-webkit-transform:scale(1,1);opacity:1;}
}
#-moz-keyframes quoteMoveR {
0% {-moz-transform:scale(0,0);opacity:0;}
50% {-moz-transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {-moz-transform:scale(1,1);opacity:1;}
}
#keyframes quoteMoveR {
0% {transform:scale(0,0);opacity:0;}
50% {transform:scale(0,0);opacity:0;}
55% {opacity:1;}
100% {transform:scale(1,1);opacity:1;}
}
/*-----------------------------------Quotation Marks 1 Reverse-----------------*/
#-webkit-keyframes markMove1R {
0% {left:-5px;top:-160px;-webkit-transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;-webkit-transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;-webkit-transform: scale(1,1);}
100% {left:10px; top:103; -webkit-transform: scale(1,1);}
}
#-moz-keyframes markMove1R {
0% {left:-5px;top:-160px;-moz-transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;-moz-transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;-moz-transform: scale(1,1);}
100% {left:10px; top:103; -moz-transform: scale(1,1);}
}
#-keyframes markMove1R {
0% {left:-5px;top:-160px;transform: scale(0.45,0.45);}
10% {left:-5px;top:-50px;transform: scale(0.45,0.45);}
50% {left:325px;top:-50px;transform: scale(1,1);}
100% {left:10px; top:103;transform: scale(1,1);}
}
/*----------------------------------Quotation Marks 2 Reverse-------------------------------*/
#-webkit-keyframes markMove2R {
0% {left:30px;top:-160px;-webkit-transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;-webkit-transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;-webkit-transform: scale(1,1);}
100% {left:696px; top:-15;-webkit-transform: scale(1,1);}
}
#-moz-keyframes markMove2R {
0% {left:30px;top:-160px;-moz-transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;-moz-transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;-moz-transform: scale(1,1);}
100% {left:696px; top:-15;-moz-transform: scale(1,1);}
}
#keyframes markMove2R {
0% {left:30px;top:-160px;transform: scale(0.45,0.45);}
10% {left:30px;top:-50px;transform: scale(0.45,0.45);}
50% {left:395px;top:-50px;transform: scale(1,1);}
100% {left:696px; top:-15;transform: scale(1,1);}
}
/*-----------------------------Cecil Move Reverse-----------------------------*/
#-webkit-keyframes cecilMoveR {
0% {left:-30px;top:-45px;-webkit-transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;-webkit-transform: scale(0.35,0.35);}
50% {left:490px;top:40px;-webkit-transform: scale(1,1);}
75% {left:490px;top:120px;-webkit-transform: scale(1,1);}
100% {left:340px; top:120px;-webkit-transform: scale(1,1); }
}
#-moz-keyframes cecilMoveR {
0% {left:-30px;top:-45px;-moz-transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;-moz-transform: scale(0.35,0.35);}
50% {left:490px;top:40px;-moz-transform: scale(1,1);}
75% {left:490px;top:120px;-moz-transform: scale(1,1);}
100% {left:340px; top:120px;-moz-transform: scale(1,1); }
}
#keyframes cecilMoveR {
0% {left:-30px;top:-45px;transform: scale(0.35,0.35);}
10% {left:-30px;top:63px;transform: scale(0.35,0.35);}
50% {left:490px;top:40px;transform: scale(1,1);}
75% {left:490px;top:120px;transform: scale(1,1);}
100% {left:340px; top:120px;transform: scale(1,1); }
}
/*-----------About Us IE Version Not setup-----------------------*/
.aboutContainer {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;
-webkit-animation: aboutShow 2s ease-in-out;
-webkit-animation-delay:5s;
-webkit-animation-fill-mode: forwards;
-moz-animation: aboutShow 2s ease-in-out;
-moz-animation-delay:5s;
-moz-animation-fill-mode: forwards;
animation: aboutShow 2s ease-in-out;
animation-delay:4s;
animation-fill-mode: forwards;
}
.aboutContainerR {position:relative; float:right; margin-right: 2.5%;width:400px; color:#069ec7; opacity:0;
-webkit-animation: aboutShowR 2s ease-in-out;
-webkit-animation-fill-mode:both;
-moz-animation: aboutShowR 2s ease-in-out;
-moz-animation-fill-mode:both;
animation: aboutShowR 2s ease-in-out;
animation-fill-mode: both;
}
.pageParaHeader {font-family: arial; font-size: 3em; color:#069ec7;
}
.textBody {position: relative; margin-top: -20px; color:white;
}
.dropCap {position:absolute; font-size:2.5em; top:-4px;color:#069ec7;
}
#-webkit-keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#keyframes aboutShow {
0% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
#-moz-keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
#keyframes aboutShowR{
0% {opacity:1;}
25% {opacity:0;}
100% {opacity:0;}
}
body {background:black;}
Javascript
function changeClass() {
if (document.getElementById("quotationMarks1").className === "quotationMarks1")
{document.getElementById("quotationMarks1").className = "quotationMarks1R";
document.getElementById("quotationMarks2").className = "quotationMarks2R";
document.getElementById("quote").className = "quoteR";
document.getElementById("cecil").className = "cecilR";
document.getElementById("aboutContainer").className ="aboutContainerR";
document.getElementById("quoteButton").className ="quoteButtonMin";
}
else {
document.getElementById("quotationMarks1").className = "quotationMarks1";
document.getElementById("quotationMarks2").className = "quotationMarks2";
document.getElementById("quote").className = "quote";
document.getElementById("cecil").className = "cecil";
document.getElementById("aboutContainer").className ="aboutContainer";
document.getElementById("quoteButton").className ="quoteButtonMinR";
document.getElementById("quotationMarks1").style.webkitAnimationDelay = "0s";
document.getElementById("quotationMarks2").style.webkitAnimationDelay = "0s";
document.getElementById("quote").style.webkitAnimationDelay = "0s";
document.getElementById("cecil").style.webkitAnimationDelay = "0s";
document.getElementById("aboutContainer").style.webkitAnimationDelay = "0s";
document.getElementById("quotationMarks1").style.mozAnimationDelay = "0s";
document.getElementById("quotationMarks2").style.mozAnimationDelay = "0s";
document.getElementById("quote").style.mozAnimationDelay = "0s";
document.getElementById("cecil").style.mozAnimationDelay = "0s";
document.getElementById("aboutContainer").style.mozAnimationDelay = "0s";
document.getElementById("quotationMarks1").style.AnimationDelay = "0s";
document.getElementById("quotationMarks2").style.AnimationDelay = "0s";
document.getElementById("quote").style.AnimationDelay = "0s";
document.getElementById("cecil").style.AnimationDelay = "0s";
document.getElementById("aboutContainer").style.AnimationDelay = "0s";
document.getElementById("quoteButton").className ="quoteButton";
}
}
function mouseOver() {
document.getElementById("quotationMarks1").style.color = "#3ccaf0";
document.getElementById("quotationMarks2").style.color = "#3ccaf0";
}
function mouseOut() {
document.getElementById("quotationMarks1").style.color = "#069ec7";
document.getElementById("quotationMarks2").style.color = "#069ec7";
}

You simply forgot to change the animation name from markMove2 to cecilMove
.cecil { ... animation: cecilkMove2 2s ease-in-out; }
Demo
Also, you should use javascript variables to keep track of your DOM elements instead of getting them by their ID every time. It performs better, is easier to upkeep, and is easier to write as well

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

I need to override the default slide effect to dissolve effect.
When changePage function is called I need to slowly dissolve the current page to new page.
I tried with following CSS
#keyframes dissolve {
0% { opacity:1; }
5% { opacity:0.9;}
15% { opacity:0.7;}
25% { opacity:0.5;}
35% { opacity:0.3;}
45% { opacity:0;}
55% { opacity:0.2;}
65% { opacity:0.4;}
75% { opacity:0.6;}
85% { opacity:0.8;}
95% { opacity:0.9;}
100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
-webkit-animation-name: dissolve;
-moz-animation-name: dissolve;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 350ms
}
I have created a fiddle with above css.
The page transistion is not smooth with above code.
How to correct page transistion to run smoothly?

you need also vendor prefixes in #keyframes: #-webkit-keyframes and so on ..

I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile.
Please add #-webkit-keyframes ,#-moz-keyframes, and #-o-keyframes in CSS like #keyframes added below.
#keyframes dissolve-out {
0% { opacity: 1; }
20% { opacity: 0.5; }
40% { opacity: 0.2; }
60% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes dissolve-in {
0% { opacity: 0; }
20% { opacity: 0; }
40% { opacity: 0; }
60% { opacity: 0.2; }
80% { opacity: 0.6; }
100% { opacity: 1; }
}
.slideup.in, .slide.in, .slide.in.reverse {
-webkit-animation: dissolve-in;
-moz-animation: dissolve-in;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
-webkit-transform: translateX(0%);
-webkit-animation: dissolve-out;
-moz-transform: translateX(0%);
-moz-animation: dissolve-out;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s !important;
-moz-animation-duration:3s !important;
}
Please see the demo.
Above CSS will give you a dissolve effect with overriding the default slide effect of page transistion in jQuery Mobile.

Develop Reference

JavaScript is the programming language of the Web.

How to use CSS \cubic-bezier to implement sine function? - javascript

I'm going to implement CSS width animation in sine function like: But with cubic-bezier, I can only set four parameters like transition: all 500ms cubic-bezier(0.695, 0.015, 1.000, 0.275);. Is it position to achieve this using CSS animation? Or else how to do this in JS?

Related

How to create spinning animation in CSS? [duplicate]

CSS fan animation

Separate properties for different animations on same object

Firefox will not update changes to CSS Animation

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

Categories

Resources