I am trying to animate a speedometer - going from left (green) to right (red). Once the animation has run am I trying also trying to make the needle loop at the end/red area of the barometer. How can I achieve this using only CSS?
#speedometer {
display: inline-block;
position: relative;
}
#speedometer .barometer {
background-image: url("https://svgshare.com/i/GAZ.svg");
background-repeat: no-repeat;
width: 200px;
height: 200px;
display: inline-block;
}
#speedometer .needle {
background-image: url("https://svgshare.com/i/GBP.svg");
background-repeat: no-repeat;
z-index: 999999;
width: 200px;
height: 250px;
display: inline-block;
left: 0px;
position: absolute;
top: 0px;
}
<div id="speedometer">
<span class="barometer"></span>
<span class="needle"></span>
</div>
You can first adjust the dimension of the needle element and the transform-origin then simply use a rotation:
#speedometer {
display: inline-block;
position: relative;
}
#speedometer .barometer {
background-image: url("https://svgshare.com/i/GAZ.svg");
background-repeat: no-repeat;
width: 200px;
height: 110px;
display: inline-block;
}
#speedometer .needle {
background-image: url("https://svgshare.com/i/GBP.svg");
background-repeat: no-repeat;
z-index: 999999;
width: 200px;
height: 110px;
display: inline-block;
left: 0px;
position: absolute;
bottom: 5px;
animation:
change 3s linear,
loop 1s linear 3s infinite alternate;
transform-origin:50% calc(100% - 8px) ;
}
#keyframes change {
0% {
transform:rotate(-90deg);
}
50% {
transform:rotate(0deg);
}
100% {
transform:rotate(90deg);
}
}
#keyframes loop {
0% {
transform:rotate(90deg);
}
100% {
transform:rotate(70deg);
}
}
<div id="speedometer">
<span class="barometer"></span>
<span class="needle"></span>
</div>
Related
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
I am trying to replicate this transition from uber.design site:
The thing is that i am stuck at reversing the transition:
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
<span class="un">Underlined Text</span>
You can use gradient and adjust background-position with a delay to obtain such effect:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: 0 100%; /*OR bottom left*/
background-size: 0% 2px;
background-repeat: no-repeat;
transition:
background-size 0.3s,
background-position 0s 0.3s; /*change after the size immediately*/
}
.un:hover {
background-position: 100% 100%; /*OR bottom right*/
background-size: 100% 2px;
}
<span class="un">Underlined Text</span>
In case you want a continuous animation on hover you can try this:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right -100% bottom 0;
background-size: 200% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left -100% bottom 0;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
You can check this answer for more details about how the calculation of the different value is done: Using percentage values with background-position on a linear-gradient
Another kind of animation
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
background-position: right bottom;
background-size: 300% 2px;
background-repeat: no-repeat;
}
.un:hover {
background-position: left bottom;
transition: background-position 0.5s;
}
<span class="un">Underlined Text</span>
let's don't forget the basic one:
.un {
display: inline-block;
padding-bottom:2px;
background-image: linear-gradient(#000 0 0);
background-position: right bottom; /* OR left bottom*/
background-size: 100% 2px;
background-repeat: no-repeat;
transition: background-size 0.5s;
}
.un:hover {
background-size: 0% 2px;
}
<span class="un">Underlined Text</span>
You can find more techniques here: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40
Another related article: Cool Hover Effects That Use Background Properties
You'll need your pseudo element to be absolute positioned and use the :not selector to reproduce this effect.
.un {
display: inline-block;
position: relative;
}
.un:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;
}
.un:not(:hover):after {
right: 0;
left: auto;
}
<span class="un">Underlined Text</span>
The easiest solution of all, without :not selector or gradients, is to switch between right and left positions such as in the code.
span.un {
position: relative;
}
span.un::after {
position: absolute;
content: "";
background: black;
bottom: 0;
right: 0;
height: 2px;
width: 0%;
transition: 300ms ease-in-out;
}
span.un:hover::after {
width: 100%;
left: 0;
}
<span class="un">Underline me</span>
Take the following example:
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
height: 100%;
margin: 0;
}
#main {
background: #222222;
position: relative;
flex: 640px 0 0;
height: 360px;
}
#keyframes stars {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
#stars {
animation: stars 10s linear infinite;
background-image: url('https://i.imgur.com/nyFndCj.png');
background-size: 100% 100%;
background-repeat: repeat repeat;
position: absolute;
width: 100%;
height: 100%;
}
<div id="main">
<div id="stars"></div>
</div>
The idea here is to animate the stars moving from one side to the other by changing the background position using percentages. I can get this working using px, for instance, but that requires me to know the width in advance (in this case 640px) and if I want to change the width/height of #main I need to change the animation values and I want to avoid that, thus the percentages. Also, I want to acomplish this with CSS only, no JavaScript at all.
Make the size of the background smaller and use scale to rectify this by increasing the size of the container. Then you will be able to animte the background like you want:
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
background: #222222;
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
}
#stars {
animation: stars 10s linear infinite;
background-image: url('https://i.imgur.com/nyFndCj.png');
background-size: 50% 100%;
position: absolute;
left: 0;
right: 0;
height: 100%;
transform: scaleX(2);
}
#keyframes stars {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
<div id="main">
<div id="stars"></div>
</div>
Here is another idea without scale where you also make the element twice bigger using right:-100% or left:-100% or width:200%
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
background: #222222;
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
}
#stars {
animation: stars 10s linear infinite;
background-image: url('https://i.imgur.com/nyFndCj.png');
background-size: 50% 100%;
position: absolute;
left: 0;
right: -100%;
height: 100%;
}
#keyframes stars {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
<div id="main">
<div id="stars"></div>
</div>
Here is another simplification considering pseudo element:
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
z-index:0;
}
#main:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:-100%;
bottom:0;
animation: stars 10s linear infinite;
background:
url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
#222222;
}
#keyframes stars {
100% {
background-position: right;
}
}
<div id="main">
</div>
In all the case, the trick is to avoid having 100% 100% in the background-size or it will be impossible to animate using percentage.
I have used left/right for simplification which is equivalent to 0% 50%/100% 50%. Simply switch between both to change the direction.
More details here: https://stackoverflow.com/a/51734530/8620333
And since we have made the size of the container bigger, we can also animate it using translate to have better performance:
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
z-index:0;
}
#main:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:-100%;
bottom:0;
animation: stars 10s linear infinite;
background:
url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
#222222;
}
#keyframes stars {
100% {
transform: translateX(-50%);
}
}
<div id="main">
</div>
With scaling:
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
z-index:0;
}
#main:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
transform:scaleX(2);
transform-origin:left;
animation: stars 10s linear infinite;
background:
url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
#222222;
}
#keyframes stars {
100% {
transform:scaleX(2) translateX(-50%);
}
}
<div id="main">
</div>
In the other direction
body {
background-color: black;
height: 100vh;
margin: 0;
}
#main {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
z-index:0;
}
#main:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
transform:scaleX(2);
transform-origin:right;
animation: stars 10s linear infinite;
background:
url('https://i.imgur.com/nyFndCj.png') left/50% 100%,
#222222;
}
#keyframes stars {
100% {
transform:scaleX(2) translateX(50%);
}
}
<div id="main">
</div>
I want the picture to "blink", i.e. to get changed immedietely, but it works like a carousel. Where have I made a mistake?
Here is the code: http://cssdeck.com/labs/1o63nrrv3t
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
}
#keyframes play {
100% {
background-position: center -75px;
}
}
<!DOCTYPE html>
<head>
<title>Logo</title>
</head>
<body>
<header>
<div class="logo"></div>
</header>
</body>
You can use this css instead to make it work
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
}
#keyframes play {
0%{
background-position:center top;
}
50%{
background-position:center top;
}
51%{
background-position:center bottom;
}
100% {
background-position:center bottom;
}
}
if you want your picture to blink all you have to do is use the opacity
body {
background-color: black;
}
.logo {
height: 850px;
width: 400px;
margin: 0 auto;
}
.logo:before {
content: "";
display: inline-block;
position: absolute;
height: 75px;
width: 400px;
top: 400px;
z-index: 1;
background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat;
font-size: 0;
line-height: 0;
animation: play 1s infinite;
opacity:0;
}
#keyframes play {
from{opacity:0;}
to {opacity:1;}
}
see your example here
i think my implementation of an animated hexagon has several cross-browser-problems:
http://jsbin.com/mojavowapi/1/edit?css,output
.hexagon {
position: relative;
width: 173px;
height: 300px;
background-image: url(https://live.tlprod.de/temp/glas.jpg);
background-size: auto 100%;
background-position: 50% 50%;
transition: all 2s linear;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: inherit;
}
.hexLeftBox, .hexRightBox {
overflow: hidden;
transform: scaleY(1.6) rotate(-45deg);
background: inherit;
top: 27.9%;
position: absolute;
display: inline-block; /* let the block get the width of the containing image */
z-index: 1;
height: 44%;
}
.hexLeft, .hexRight {
width: auto;
height: 100%; /* get full height of parent element, set width to aspect ratio 1:1 */
}
.hexLeftBox {
transform: scaleY(1.6) rotate(-45deg) translate(-35.5%,-35.5%);
}
.hexRightBox {
right: 0;
transform: scaleY(1.6) rotate(-45deg) translate(35.5%,35.5%);
}
.hexLeftBox:after, .hexRightBox:after {
content: "";
position: absolute;
width: 142%;
height: 142%;
transform: rotate(45deg) scaleY(1) scaleX(1.6) translate(-50%,0%);
transform-origin: 0 0;
background: inherit;
transition: all 2s linear;
}
.hexLeftBox:after {
background-position: -7% top;
}
.hexRightBox:after {
background-position: 107% top;
}
.hexagon:hover {
width: 300px;
height: 350px;
}
.hexagon:hover .hexLeftBox:after {
background-position: -35% top;
}
.hexagon:hover .hexRightBox:after {
background-position: 135% top;
}
.hexagon2 {
width: 300px;
height: 350px;
margin-top: 40px;
}
.hexagon2 .hexLeftBox:after {
background-position: -35% top;
}
.hexagon2 .hexRightBox:after {
background-position: 135% top;
}
In this example the above hexagon changes on hover to the -same- size as the other loaded with.
In Chrome 50 the background image of the after-elements disappear AND the aspect ratio crashes
In IE 11 only the aspect ratio of the edges crashes
In Firefox 46 all works fine
..but the funny thing: In all Browser the second static version with the same values as the hover is working fine.
Are there some problems known and fixable?
The crashed aspect ratio is a webkit-optimizing-issue.
It could be fixed only with switching to a javascript-animation with forcing the rerendering via:
$('body').css('display', 'table').height();
$('body').css('display', 'block');
And with jQuery you can do this in the progress-Parameter of the animate()-function.
Switching to a javascript-animation also eleminates the disappearing after-elements.