I am using css animations on the receiver app that runs on the chromecast and I've noticed 2 issues with it.
Firstly, the animations are very choopy. I estimate it looked probably about 5 frames per second.
Second is screen tearing issues during the animations. It seems like the system isn't waiting for vblank before swapping buffers?
I've used a test image, and here's my css definitions for the animations:
#testImage {
animation-name: seesaw;
animation-duration: 5.0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: seesaw;
-webkit-animation-duration: 5.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
#keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
Am i doing something wrong, or I should avoid using css animations altogether on the receiver app?
Does anyone have any advise on how else I would do animations?
I don't think you are doing anything wrong, it is just that the chromecast device is limited in its animation capabilities. Leon Nichols did some helpful benchmarking here: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8
Related
I'm trying to create an svg where when you hover over one element in the image it triggers different animations on other parts of the image.
Example here: https://codepen.io/SHINZOC/pen/GRgXeey
Looking to have the pink rectangle disappear when hovering over while also having each square rotate at different angles. I can get one square to rotate but the others won't for some reason. Any help would be much appreciated!!
.pink_rectangle { transition: .3s;}
.pink_rectangle:hover {opacity: 0;}
#pink_rectangle:hover + #blue_square {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
}
#pink_rectangle:hover + #yellow_square {
transform: rotate(35deg);
transform-origin: center center;
transform-box:fill-box;
}
#pink_rectangle:hover + #orange_square {
transform: rotate(15deg);
transform-origin: center center;
transform-box:fill-box;
}
It is not yet possible to do what you ask with plain css you would need to use addEventListener("mouseover", function()); in javascript to make it work.
It doesn't work because CSS can't affect other css classes that are not contained within it.
If you don't know how to use addEventListener read a bit of this.
I'm trying to create an svg image where when you hover over part of an image it animates other parts of the image. It's a guitar pedal that when you hover over it, the light goes on and the dials rotate. However I can't figure out how to rotate the dials without the dials shooting off of the pedal. Any help would be much appreciated!!
Here's an example of it:
https://codepen.io/SHINZOC/pen/vYEaooM
.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
}
Change the CSS to
.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
}
since you want to rotate around the fill box and not the view box.
I am new to Python/Django world. I am looking for some help to create a webpage similar to below link:
http://www.mceinsurance.com/resources/uk-motorcycle-accident-hotspots
It seems there's animation and it is using following jargon.
-webkit-animation
::-webkit-scrollbar
#-webkit-keyframes rotate
Need help in understanding frontend. If I have to design similar website what frontend should I choose given the fact backend will be python/django framework.
Spinet of the code:
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0)}
to {-webkit-transform: rotate(360deg)}
}
::-webkit-scrollbar { height: 12px; width: 12px; background: #ccc; }
::-webkit-scrollbar-thumb { background: #999; -webkit-border-radius:
1ex; }
::-webkit-scrollbar-thumb:hover { background: #858383;}
::-webkit-scrollbar-thumb:active { background: #bd0e0e;}
The problem I'm facing is that when I click on a button to show this element, on IE 10 it doesn't show up. I'm adding the display: block property via JavaScript, that's why it's not in the CSS. It works on all other browsers except IE.
If I remove the transition it shows up.
section {
display: none;
position: relative;
top: 50%;
margin: 0 auto;
width: 400px;
transition: all 0.5s linear;
transform: translate(0,-300%);
}
section.visible {
transform: translate(0,-50%);
}
I solved the issue by showing the section when adding display: block on the visible class rather than using jQuery show(). Guess IE10+ has issues with that.
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.