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
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'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
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
I am animating an SVG element, using this code:
#bubble_1_{
-webkit-animation: bubble1 10s forwards linear infinite;
}
#-webkit-keyframes bubble1{
0%{
-webkit-transform: translate(0px,0px);
}
5%{
-webkit-transform: translate(1px,10px);
}
10%{
-webkit-transform: translate(-1px,20px);
}
15%{
-webkit-transform: translate(1px,30px);
}
20%{
-webkit-transform: translate(-1px, 40px);
}
25%{
-webkit-transform: translate(10px,45px);
}
30%{
-webkit-transform: translate(20px,50px);
}
35%{
-webkit-transform: translate(30px,49px);
}
40%{
-webkit-transform: translate(40px, 51px);
}
45%{
-webkit-transform: translate(50px,48px);
}
50%{
-webkit-transform: translate(60px,51px);
}
55%{
-webkit-transform: translate(70px,49px);
}
60%{
-webkit-transform: translate(80px, 51px);
}
65%{
-webkit-transform: translate(90px,48px);
}
70%{
-webkit-transform: translate(100px,51px);
}
75%{
-webkit-transform: translate(110px,49px);
}
80%{
-webkit-transform: translate(120px, 51px);
}
85%{
-webkit-transform: translate(130px,71px);
}
90%{
-webkit-transform: translate(131px,100px);
}
95%{
-webkit-transform: translate(129px,120px);
}
100%{
-webkit-transform: translate(131, 140px);
}
}
But, when it comes to an end, I can see it going back to it's initial position. That is strange, because transition between 100% and 0% should occur instantly, right? I need that kind of behavior, I don't want it to be seen going back.
Does anyone know what I should do? I tried with 'forwards' and 'backwards', it doesn't work.
It looks like you are just missing px on your 131, 140px setting at 100% keyframe, that should then make it instantly jump back to its starting position once finished (which I think is what you want).
If you need it to stop after one play then you need to add -webkit-animation-iteration-count: 1; and remove the infinte off your animation.
The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.
you have to use -webkit-animation-fill-mode: forwards; to do this effect like so :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
this is an example LINK
-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.