I'm working on rotating a sprite 360 degrees around a certain point using the css property translateX. The sprite rotates around the point as expected, but I's like to know how I can obtain the 'left' and 'top' values whilst the sprite is rotating. Is using translateX the correct way to go about this or is there a much better solution?
#target {
position: absolute;
top: 292px;
left: 291px;
-webkit-animation: orbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: orbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: orbit 4s linear infinite; /* Opera 12+ */
animation: orbit 4s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
#-webkit-keyframes orbit {
from { -webkit-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#-moz-keyframes orbit {
from { -moz-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#-o-keyframes orbit {
from { -o-transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
#keyframes orbit {
from { transform: rotate(0deg) translateX(235px) rotate(0deg); }
to { transform: rotate(360deg) translateX(235px) rotate(-360deg); }
}
Just discovered a function called position() within jquery to obtain the left and top positions. Works for me. Wanted to share this in case someone else is in this situation.
$("#myDIV").position().left
$("#myDIV").position().top
Related
I use this css code to be able to scroll text automatically if it takes up to much space on the page. Using a javascript function which adds the class below if it does.
The scrolling works great, but I have performance issues. It moves pretty inconsistent. A bit choppy and laggy. Is there anything I can do to make it scroll smoother?
I have tried on Chrome and Firefox on Windows, but also Chrome and Firefox on Android, and performance on Android is far worse.
Example: https://jsfiddle.net/zc12L4ka/
.vscroll {
position: absolute;
height: auto;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 25s linear infinite;
-webkit-animation: scroll-up 25s linear infinite;
animation: scroll-up 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
I made a fidget spinner animation which we are using for a Sale.
You can see it working perfectly here: https://jsfiddle.net/e2tt2mao/448/
However when I apply the same/similar code to the "scene" i am currently making I cant get it to spin at all...
See here: https://jsfiddle.net/uzfpqysc/8/
I have tried everything.. I'm not sure why it wont spin in my "second js fiddle link"
Any help is much appreciated!
#-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;
}
The issue was that the .rotating span had not width and height because the images inside were absolute positioned. I have defined a width and height for the span and have it a transform origin of transform-origin: 50% 50%;. I have also attempted to centrally position the .rotating span, but you may want to adjust it.
https://jsfiddle.net/WizardCoder/uzfpqysc/11/
EDIT: Here is the responsive version. I had to adjust the styles for .animateVSS very slightly to allow me to properly center the spinner. It will do the same as what your styling was doing just a slightly different approach.
https://jsfiddle.net/WizardCoder/uzfpqysc/12/
I'm trying to grow a circular image on hover, but can't get this code to work.
I can get the circle to grow using the CSS transform but it grows immediately and is a bit ugly. Ideally I'd want there to be a 2-3000ms delay with linear growth both on hover and mouse out.
I know I can do this with JS/D3 but need to do it with CSS if possible.
Have tried
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
width:250px;}
25%
{
width:260px;}
75%
{
width:270px;}
100%
{
width:280px;
}
}
and
.wpb_single_image .vc_single_image-wrapper.vc_box_circle:hover
{
animation: mymove 3s normal;
}
#-webkit-keyframes mymove {
0%
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
}
25%
{
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);}
75%
{
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);}
100%
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
But neither are working.
Is there a better way to do this?
I've created a pen based on your code
Using transform: scale is a better method since it increases both width and height.
The key thing you missed out on for creating a smooth animation is the transition attribute, this needs to be applied to the element in it's normal state not it's :hover state.
I've added this transition styling:
transition: 3s ease-in-out;
Note that it's the same length as your animation timing. ease-in-out is a standard easing function, if you'd like to get more in-depth try playing around with cubic-bezier
Animation delay can be added easily with this attribute:
animation-delay:2s
Another thing which makes keyframe animations smoother is having the 0% and 100% stylings the same, so in this example the circle returns to the original scale by the time it reaches 100% which creates a nice, smooth, repeatable animation.
I've also created an alternative animation which looks even smoother, this is done by simply setting scale for the 0% and 100% points in the animation:
0%{transform: scale(1)}
100%{transform: scale(2)}
Another thing you can do is change your animation loop setting from normal to infinite alternate, checkout my second example this is using infinite alternate which makes the circle grow and shrink with no sudden snaps.
You can delay the start of an animation with animation-delay
Such as
.delay {
animation-delay:2s
}
Reference # MDN
Demo showing the difference below
.circle {
border-radius: 50%;
display: block;
}
.circle:hover {
animation: mymove 3s normal;
}
.delay:hover {
animation-delay: 2s
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#-webkit-keyframes mymove {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.033);
-ms-transform: scale(1.033);
transform: scale(1.033);
}
75% {
-webkit-transform: scale(1.066);
-ms-transform: scale(1.066);
transform: scale(1.066);
}
100% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
}
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle" />
</div>
<div>
<img src="http://lorempixel.com/output/abstract-q-c-100-100-4.jpg" alt="" class="circle delay" />
</div>
You can delay the start of the transition by using the transition-delay property.
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
W3Schools
For example I make scale from 1 to 2, and I want to make it hold when it gets to scale 2, for example while the user hovers some image it is scaled, is that possible?
#-webkit-keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
#keyframes scale {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
to {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
animation: scale 2s;
-webkit-animation: scale 2s;
}
use animation-fill-mode: forwards or both
div.item:hover
{
animation: scale 2s forwards;
-webkit-animation: scale 2s forwards;
}
You can use the transition property instead of the keyframes animation.
div.item {
transform: scale(1);
transition: all .2s;
}
div.item:hover {
transform: scale(1.5);
}
See this fiddle for an example: http://jsfiddle.net/8eHHL/
Use this:
.div.item { animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for other modern browsers */
}
Use this.I think it will work.
I give only webkit(Crome) version you need to write for all.
#-webkit-keyframes scale{
0% {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
}
100% {
transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari and Chrome */
}
}
div.item:hover
{
-webkit-animation: scale 2s;
}
I'm afraid it's impossible to keep result of animation in your case. You bind animation on hover and trying to keep it when user blurs mouse from your element. But there is ability to keep animaton on click. click event is done with :target
I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite).
Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right)
I'm unsure as to whether transform or key animation frames need to be used.
you could use the ::after (or ::before) pseudo-element, to generate the animation
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
}
/* element to animate */
div::after /* you will use for example "a::after" */
{
content:' ►'; /* instead of content you could use a bgimage here */
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
/* actual animation */
div:hover::after /* you will use for example "a.selected::after" */
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
HTML:
<div>Test button</div>
in your case you will use element.selected class instead of
jsfiddle demo: http://jsfiddle.net/p8kkf/
hope this helps
Here is a rotating css class that I have used to spin a background image:
.rotating {
-webkit-animation: rotating-function 1.25s linear infinite;
-moz-animation: rotating-function 1.25s linear infinite;
-ms-animation: rotating-function 1.25s linear infinite;
-o-animation: rotating-function 1.25s linear infinite;
animation: rotating-function 1.25s linear infinite;
}
#-webkit-keyframes rotating-function {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotating-function {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotating-function {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotating-function {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotating-function {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}