I have the following codepen:
http://codepen.io/AlexanderWeb00/pen/GWprqx
I am trying to make it look like a gif so that I can pause it on hover.
However the result is not as expected: it almost looks like a vertical slider but it should only behave like a gif. It needs to be responsive which it is at the moment.
It should show one full t-shirt at the time
body {
padding: 0;
text-align: center;
}
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 60%;
}
.children {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://imageshack.com/a/img922/8632/ME6qgO.png') no-repeat 0 0%;
background-size: 100%;
animation: sprite 5s steps(5) infinite;
}
#keyframes sprite {
from { background-position: 0 0%; }
to { background-position: 0 100%; }
}
Related
Im trying to do the same button but without the need to make hover (running the animated background all the time).
I've tried different approach like using background-clip, shadows, etc but unfortunately without success.
Maybe if I use another element like a div and span can work but I really want to do it with a button.
Codepen
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #000;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
What is making your ::before pseudo-element to hide when it's not hovered is opacity:0. If you remove it, you will have the desired effect. Also, you might want to remove the glow-on-hover:hover:before selector since it's not going to be any use.
Trying to implement a sprite sheet animation via css. I have followed this example
https://codepen.io/SitePoint/pen/zxXrzP
However, my animation is sliding vertically and I can not understand why. Any input appreciated.
.parent {
position: relative;
width: 70%;
margin: -10% auto 0 auto;
/* positioning tweak */
}
.parent:before {
content: "";
display: block;
padding-top: 61.37%;
}
.ryu {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://dev.froststudio.se/wp-content/uploads/2020/06/frostcell_v03.png");
background-size: 100%;
animation: sprite 4s steps(79) forwards;
}
#keyframes sprite {
from {
background-position: 0 0%;
}
to {
background-position: 0 100%;
}
}
http://dev.froststudio.se
Cheers,
I built an animation for my background but is not responsive and I don't know how to make it.
I used Bootstrap 4 and CSS as my main design resources.
The CSS I sued as follows:
/* Animation GLitch */
.animation {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
max-width: 100%;
max-height: 100%;
margin: 0 auto;
overflow: hidden;
}
.animation:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
opacity: 0.5;
mix-blend-mode: hard-light;
display: block;
}
.animation:hover:before {
animation: animate 0.2s linear infinite;
}
#keyframes animate {
0% {
background-position: 0 0;
filter: hue-rotate(0deg);
}
10% {
background-position: 5px 0;
}
20% {
background-position: -5px 0;
}
30% {
background-position: 15px 0;
}
40% {
background-position: -5px 0;
}
50% {
background-position: -25px 0;
}
60% {
background-position: -50px 0;
}
70% {
background-position: 0 -20px;
}
80% {
background-position: -60px -20px;
}
81% {
background-position: 0 0;
}
100% {
background-position: 0 0;
filter: hue-rotate(360deg);
}
}
The animation consists of 2 same pictures that create this glitch effect but I don't know how to make it responsive.
The snippest it is working here:
https://codepen.io/Jakub41/pen/abbwxWb
I tried to use the sizing but it is modifying my effect I would like to keep the same effect on all screens
I do not quite understand in which way you want it to be responsive but try adding these lines after background: url(...) both times:
background-repeat: no-repeat;
background-size: cover;
Look here for more information about the background-size property.
Also the second answer of this question might interest you.
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.