I currently have this code
-webkit-transition: 0.9s;
-webkit-transform: rotate(-9deg);
-moz-transition: 0.9s;
-moz-transform: rotate(-9deg);
-o-transition: 0.9s;
-o-transform: rotate(-9deg);
-ms-transition: 0.9s;
-ms-transform: rotate(-9deg);
I would like it so that my image will rotate to -9 and then to 9 and then repeat itself over and over again. So that the whole time someone is on the site it will just rotate from -9 degress to 9 degress
Edit: I have been told that JavaScript is needed to do this, so I am now looking for some JavaScript to do this.
Thanks
You can do this with CSS animations, depending on how much compatibility you need.
div {
-webkit-animation-duration: 0.9s;
-webkit-animation-name: ninetonine;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes ninetonine {
from {
-webkit-transform: rotate(9deg);
}
to {
-webkit-transform: rotate(-9deg);
}
}
See a demo here
Related
This is exactly what I want to achieve (animation starts when I hover and reveses after I hover off). I just do not want the animation start until I hover over the object. In code the animation starts right after refreshing.
.class {
animation-name: out;
animation-duration: 2s;
/* Safari and Chrome: */
-webkit-animation-name: out;
-webkit-animation-duration: 2s;
}
.class:hover {
animation-name: in;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
/* Safari and Chrome: */
-webkit-animation-name: in;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#keyframes in {
from {
transform: rotate(50deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes in
/* Safari and Chrome */
{
from {
transform: rotate(50deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
#-webkit-keyframes out
/* Safari and Chrome */
{
from {
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
You can get rid of the animations and just add transform and transition properties directly on the class like this:
.class {
transform: rotate(0deg);
transition: transform 2s;
}
.class:hover {
transform: rotate(360deg);
transition: transform 5s;
}
<div style="width:100px; height:100px; background-color:red" class="class"></div>
I'm having issues while building my new website.
I have a mobile nav that shows up whenever your browser is small enough (I believe under 940px wide) and it works fine on Chrome and other webkit browsers, but in Firefox and IE the transitions don't work and nothing transforms the way I want it to. I'm not really sure why this is and could use help.
Here's a link to the site: http://teamreest.com/
EDIT: I am using the specific vendor prefixes, yet it still does not work.
More specifically relating to this:
.overlay{
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: $main-color;
overflow: auto;
z-index:100;
font-size:50px;
font-weight:300;
min-height:400px;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.overlay.show {
opacity:1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
Also this:
.container{
height:100%;
opacity: 1;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
}
.container.show {
opacity: 0.5;
-webkit-transform: translateX(30%);
-moz-transform: translateX(30%);
-ms-transform: translateX(30%);
transform: translateX(30%);
}
I found the issue in my code.
The transition as seen here:
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-ms-transition: -ms-transform 0.4s;
transition: -transform 0.4s;
And here:
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
transition: -transform 0.4s, opacity 0.4s;
Are problematic. As seen, the regular transition property has an issue.
That issue can be seen as there is a dash in front of the transform property of the transition. By removing this the problem is solved.
I have tried for two days now to find a way to rotate my image while i input a button. What i want help with is to help me get the code to rotate a image in Javascript called images[0] around its own axis. I know this may look hard but i have tried aswell and I really need help from professionals.
Based upon Xotic750's jsfiddle, here is an example using animation and #keyframes (using -webkit- prefix, modify for other browsers).
CSS
#-webkit-keyframes r {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
-webkit-animation: r 2s infinite linear;
}
#-webkit-keyframes y {
0% { -webkit-transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
-webkit-animation: y 2s infinite linear;
}
HTML
<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
Paul S has provided a much better answer.
Here is an example of rotating an image 90 degrees
CSS
#container {
position: relative;
width: 450px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#card {
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
HMTML
<div id="container">
<div id="card">
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
</div>
</div>
jsfiddle
I have to develop a similar website like http://www.unlocknrepair.com/
In this website when you hover your mouse over the Unlocking or Phone repair button a dropdown menu appears. Is there a way to make this dropdown appear in bouncy way.. like I want it to bounce a bit before it stabilizes. It is possible in jQuery, but can it be done using only css and javascript?
If experimental css3 is an option, you can do it even without javascript using css animations with the #keyframes rule.
#parent {
position:relative;
height: 40px;
}
#onhover {
display: none;
position: absolute;
top: 0;
}
#parent:hover #onhover {
display: block;
top: 30px;
animation:mymove 0.8s linear;
-moz-animation:mymove 0.8s linear; /* Firefox */
-webkit-animation:mymove 0.8s linear; /* Safari and Chrome */
-o-animation:mymove 0.8s linear; /* Opera */
-ms-animation:mymove 0.8s linear; /* IE */
}
#keyframes mymove
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-o-keyframes mymove /* Opera */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-ms-keyframes mymove /* IE */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
<div id="parent">hover me<div id="onhover">hovering</div></div>
Another "bounce" animation:
$(function() {
$(document.body).delegate( "img", "mouseenter", function() {
var $this = $(this).addClass("right");
setTimeout(function() {
$this.removeClass("right");
}, 2000);
});
});
body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
-moz-transition: -moz-transform 1s ease-in;
-webkit-transition: -webkit-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
-ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
-moz-animation-name: bounce;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-transform: translate(400px);
-moz-transition: none;
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(400px);
-webkit-transition: none;
}
#-moz-keyframes bounce {
from {
-moz-transform: translate(0px);
-moz-animation-timing-function: ease-in;
}
60% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
73% {
-moz-transform: translate(360px);
-moz-animation-timing-function: ease-in;
}
86% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
93% {
-moz-transform: translate(380px);
-moz-animation-timing-function: ease-in;
}
to {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
}
#-webkit-keyframes bounce {
from {
-webkit-transform: translate(0px);
-webkit-animation-timing-function: ease-in;
}
60% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
73% {
-webkit-transform: translate(360px);
-webkit-animation-timing-function: ease-in;
}
86% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
93% {
-webkit-transform: translate(380px);
-webkit-animation-timing-function: ease-in;
}
to {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<img id="anim" src="http://hacks.mozilla.org/wp-content/uploads/2011/04/75px-Aurora210.png" width="75" height="75" />
See Mozilla Developer Network for more details and browser compatibility.
Yes, it is possible using native javascript. Take a look at this document
Note, I'm linking to the "easeOut" section, since I think that represents a ball's bouncing a little better than their "bounce".
Here's a good example, further down the same page.
I'm creating CSS animations on the fly, so I need to insert a CSS timing function into my document. As in:
#-webkit-keyframes slide
{
from {
-webkit-transform: translateX(-100px) translateY(-100px);
-webkit-animation-timing-function: ease-in;
}
33% {
-webkit-transform: translateX(-100px) translateY(-50px);
-webkit-animation-timing-function: linear;
}
66% {
-webkit-transform: translateX(-50px) translateY(0px);
-webkit-animation-timing-function: linear;
}
to {
-webkit-transform: translateX(0px) translateY(0px);
-webkit-animation-timing-function: ease-out;
}
}
Any idea how to pull this off (the insertion) using Javascript? I can add regular classes without any trouble, but this seems to be a special case.
Actually, it's no different from adding any other style rule to a stylesheet:
var selector = "#-webkit-keyframes slide";
var rule = "{ from { -webkit-transform: translateX(-100px) translateY(-100px); -webkit-animation-timing-function: ease-in; } 33% { -webkit-transform: translateX(-100px) translateY(-50px); -webkit-animation-timing-function: linear; } 66% { -webkit-transform: translateX(-50px) translateY(0px); -webkit-animation-timing-function: linear; } to { -webkit-transform: translateX(0px) translateY(0px); -webkit-animation-timing-function: ease-out; } }";
document.styleSheets[0].insertRule(selector + rule, 0);
Note that the above DOM manipulation is WebKit (and FireFox) specific. You'd need to add some logic to s/insertRule/addRule for IE.