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
Related
How do I make the blue platform look like its going to the left, reappears on the right and continues going left? To me, It's kind of tricky because it starts from the left, if it starts from the right than that would be easier.
*{
padding: 0;
margin: 0;
}
html,body{
height:100%;
}
.container{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
#inner{
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow:hidden
}
#platform{
width:200px;
height:50px;
position: relative;
top: 150px;
background: blue;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
left:0px;
}
50%{
left:-200px;
}
70%{
right:200px;
}
100%{
left:0%
}
<div class="container">
<div id="inner">
<div id="platform"></div>
</div>
</div>
Do it like below:
#inner {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow: hidden
}
#platform {
width: 200px;
height: 50px;
position: relative;
top: 150px;
right: 0;
transform: translate(100%);
margin-left: auto;
background: blue;
animation: move 2s linear infinite;
}
#keyframes move {
to {
right: 100%;
transform: translate(0);
}
}
<div id="inner">
<div id="platform"></div>
</div>
Control the delay to start from the left:
#inner {
width: 500px;
height: 200px;
border: 1px solid black;
margin: auto;
overflow: hidden
}
#platform {
width: 200px;
height: 50px;
position: relative;
top: 150px;
right: 0;
transform: translate(100%);
margin-left: auto;
background: blue;
animation: move 2s linear infinite -1.5s;
}
#keyframes move {
to {
right: 100%;
transform: translate(0);
}
}
<div id="inner">
<div id="platform"></div>
</div>
This is pretty crude, but you get the idea:
https://codepen.io/seanstopnik/pen/164585fcf077f8cefaef6d0f4fbd9dad
body {
padding: 60px;
}
.container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #333;
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: -100px;
height: 60px;
width: 100px;
background: blue;
-webkit-animation: box 2s linear infinite;
animation: box 2s linear infinite;
}
#-webkit-keyframes box {
0% {
transform: translateX(500px);
}
}
#keyframes box {
0% {
transform: translateX(500px);
}
}
<div class="container">
<div class="box"></div>
</div>
I try to create the effect that two gates open simultaneously, I tried modifying the width property but I achieved the desired effect only on the left gate. The idea is that the right gate be closed from the center to the right border. Thanks in advance for your suggestions
body {
position: relative;
margin: 0;
background-color: goldenrod;
}
.gate {
position: absolute;
background-color: gray;
width: 50%;
height: 100vh;
float: left;
box-sizing: border-box;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.left-gate {
animation-name: left;
border-right: 1px solid white;
top: 0;
left: 0;
}
.right-gate {
animation-name: right;
top: 0;
left: 50%;
}
#keyframes left {
from {
width: 50%;
}
to {
width: 0;
}
}
#keyframes right {
from {
width: 50%;
}
to {
width: 0;
}
}
<div class="gate left-gate"></div>
<div class="gate right-gate"></div>
Add right: 0 to the right gate:
body {
position: relative;
margin: 0;
background-color: goldenrod;
}
.gate {
position: absolute;
background-color: gray;
width: 50%;
height: 100vh;
float: left;
box-sizing: border-box;
animation-duration: 5s;
animation-fill-mode: forwards;
}
.left-gate {
animation-name: left;
border-right: 1px solid white;
top: 0;
left: 0;
}
.right-gate {
animation-name: right;
top: 0;
right: 0;
}
#keyframes left {
from {
width: 50%;
}
to {
width: 0;
}
}
#keyframes right {
from {
width: 50%;
}
to {
width: 0;
}
}
<div class="gate left-gate"></div>
<div class="gate right-gate"></div>
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 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>
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.