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%);
}
}
Related
Is there a way to pulsate opacity from 0 to 1 (repeat) slowly with a CSS3 keyframes transformation, infinitely? Or does this require jQuery or Javascript with a transition opacity inside a class that is toggled on an interval?
I'm trying to work it into my orbit transformations (below). (I'm working on a live wallpaper background effect with multiple opaque images floating in a sidebar image on an installer application I'm building in Objective C.)
.orbit1
{
animation: myOrbit 200s linear infinite;
}
.orbit2
{
animation: myOrbit2 200s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes myOrbit2
{
from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
to { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}
You can do it by adding multiple animations to the element, for example:
.orbit1
{
/* added for example reasons */
position :absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: red;
/* ---------- */
animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes Pulsate {
from { opacity: 1; }
50% { opacity: 0; }
to { opacity: 1; }
}
<div class="orbit1"></div>
I'ved modified some of your parameters (like the speed of the animation and the opacity minimum) and added some spoof styling for the element for the purpose of the example.
Edit
I had originally thought that the multiple rotate() declarations were in error, but #vals informed me why it was there (to create a counter rotation on the object). I've updated the answer, and learned something new.
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
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);
}
}
I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:
HTML
<div class="right">
<div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>
CSS
.landing .board .right {
width: 291px;
height: 279px;
background: url('../images/landing/key-pnl.png');
bottom: 16px;
right: 250px;
position: absolute;
}
.landing .board .right .key-arm {
position: absolute;
left: 44px;
top: 18px;
width: 41px;
height: 120px;
}
/*=== Key Arm Animation ===*/
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes keyarm {
0% { -moz-transform: rotate(0deg); }
5% { -moz-transform: rotate(-14deg); }
10% { -moz-transform: rotate(0deg); }
}
#-ms-keyframes keyarm {
0% { -ms-transform: rotate(0deg); }
5% { -ms-transform: rotate(-14deg); }
10% { -ms-transform: rotate(0deg); }
}
#-o-keyframes keyarm {
0% { -o-transform: rotate(0deg); }
5% { -o-transform: rotate(-14deg); }
10% { -o-transform: rotate(0deg); }
}
#keyframes keyarm{
0% { transform: rotate(0deg); }
5% { transform: rotate(-14deg); }
10% { transform: rotate(0deg); }
}
.right .key-arm{
-webkit-transform-origin: 12px 105px;
-moz-transform-origin: 12px 105px;
-ms-transform-origin: 12px 105px;
-o-transform-origin: 12px 105px;
transform-origin: 12px 105px;
-webkit-animation: keyarm 8s ease-in-out 0s infinite;
-moz-animation: keyarm 8s ease-in-out 4s infinite;
-ms-animation: keyarm 8s ease-in-out 4s infinite;
-o-animation: keyarm 8s ease-in-out 4s infinite;
animation: keyarm 8s ease-in-out 0s infinite;
}
Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?
Thanks
Mauro
UPDATE: Ok from your answers I got that #keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using #keyframes!
here's the CSS code:
.board .rays{
background: url("../images/landing/rays.gif") no-repeat 0 0 red;
height: 381px;
left: 251px;
opacity: 1;
top: 80px;
width: 408px;
position: absolute;
}
.board .bottle{
background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
bottom: 30px;
height: 405px;
left: 276px;
width: 357px;
z-index: 1;
position:absolute;
}
/*=== Rays Animation ===*/
#-webkit-keyframes rays{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes rays{
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
.board .rays{
-webkit-animation: rays 40s linear 0s infinite;
-moz-animation: rays 40s linear 0s infinite;
animation: rays 40s linear 0s infinite;
}
And the html:
<div class="board">
<div class="rays"></div>
<div class="bottle"></div>
</div>
Try it yourself in jsFiddle (if you have Safari 4) and you'll see
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
this won't work:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).
It appears that the shorthand notation will not work in Safari 4.
So this won't work :
-webkit-animation: rays 40s linear forwards;
But this will work :
-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:
animation: rays 40s linear 0.01s infinite;
I struggled with an animation working in Safari 14 (14.1.2), but not in Safari 15, and thought I'd add my findings here.
This css is part of the scrolling text loop here.
#banner-loop {
white-space: nowrap;
animation: loop-anim 5s linear infinite;
}
#keyframes loop-anim {
0% { margin-left: 0; }
100% { margin-left: -50%; }
}
I noticed that the animation "played", but didn't animate.
I tried the solutions from the other answers here, but nothing worked (including having the -webkit prefix). In the end the problem was solved by changing the start keyframe value to 0% instead of 0.
It looks like Safari can't handle the unit-less 0 shorthand in this case.
Try force quitting Safari and/or rebooting your phone (assuming you're on a phone).
Just had animations fail in Safari 15 for no apparent reason - very simple ones such as opacity and simple keyframes.
I noticed my phone was doing that thing where the white homescreen indicator gets permanently stuck on the long side of the phone even when holding it vertically. A reboot is usually needed to fix that.
Turns out rebooting also fixed the animations in Safari.
Another thing to remember with Safari is that low battery mode can affect animations and make them less smooth (and prevent muted autoplay videos from auto playing).
#-webkit-keyframes { <- let this symbol to the same line
} - >
This works on iphone 3 ios 6.1.6
with -webkit- prefix on transform and animation