I've been trying to animate my image with almost all transform functions without success.
After googling it appeared that setting with: auto might be the cause.
But removing it from my style doesn't change anything at all. Still no animation.
Here you have my code :
html,
body {
height: 100%;
}
body {
margin: 0;
}
.logo-container {
display: flex;
height: 100%;
background-color: red;
justify-content: center;
align-items: center;
}
.logo {
width: auto;
transition: scale-me 1.5s ease-in;
animation-iteration-count: infinite;
}
#keyframes scale-me {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="logo-container">
<img src="../images/Green-Monster-8-icon-128.png" class="logo" />
</div>
</body>
What is wrong in my code ?
Thanks in advance.
You have to use animation instead of transition
html,
body {
height: 100%;
}
body {
margin: 0;
}
.logo-container {
display: flex;
height: 100%;
background-color: red;
justify-content: center;
align-items: center;
}
.logo {
width: auto;
animation: scale-me 1.5s ease-in;
animation-iteration-count: infinite;
}
#keyframes scale-me {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<body>
<div class="logo-container">
<img src="https://via.placeholder.com/50" class="logo" />
</div>
</body>
Related
I am trying to add scale up animation on a div.
I tried this using both transition and animation property.
In case of transition you can notice that when hovered out the animation is smoothly reversed. However, this doesn't happen when using animation property (the div transitions back to initial width instantly)
Can someone tell me:
Why this behaviour in case of animation only?
How can I achieve the same using animation property?
.animations {
display: flex;
padding: 80px;
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
width: 200px;
height: 200px;
margin: 40px;
font-family: system-ui;
display: flex;
flex-direction: column;
align-items: center;
}
.animations > p {
color: black;
flex: 1;
text-align: center;
}
.animations .animated-box {
flex: 2;
width: 100%;
background: grey;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.animated-box.scale-up {
}
.animated-box.scale-up:hover {
animation: scale-up 0.5s ease forwards;
transform: scale(1);
}
.animated-box.scale-up-with-mouseout {
transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
transform: scale(1.2);
}
#keyframes scale-up {
100% {transform: scale(1.2)};
0%{transform: scale(1)};
}
<div class="animations">
<div>
<div class="animated-box scale-up">Hover me</div>
<p>Scale up (with keyframes)</p>
</div>
<div>
<div class="animated-box scale-up-with-mouseout">Hover me</div>
<p>Scale up (with transition)</p>
</div>
</div>
invert this part only
#keyframes scale-up {
100% {transform: scale(1.2)};
0%{transform: scale(1)};
}
and to fix the animation when mouse out add a new keyframe
#keyframes scale-down {
0% {transform: scale(1.2)};
100%{transform: scale(1)};
}
and apply it to the class .animated-box.scale-up
.animated-box.scale-up {
animation: scale-down 0.5s ease forwards;
}
.animations {
display: flex;
padding: 80px;
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
width: 200px;
height: 200px;
margin: 40px;
font-family: system-ui;
display: flex;
flex-direction: column;
align-items: center;
}
.animations > p {
color: black;
flex: 1;
text-align: center;
}
.animations .animated-box {
flex: 2;
width: 100%;
background: grey;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.animated-box.scale-up {
animation: scale-down 0.5s ease forwards;
}
.animated-box.scale-up:hover {
animation: scale-up 0.5s ease forwards;
}
.animated-box.scale-up-with-mouseout {
transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
transform: scale(1.2);
}
#keyframes scale-up {
100% {transform: scale(1.2)};
0%{transform: scale(1)};
}
#keyframes scale-down {
0% {transform: scale(1.2)};
100%{transform: scale(1)};
}
<div class="animations">
<div>
<div class="animated-box scale-up">Hover me</div>
<p>Scale up (doesn't work)</p>
</div>
<div>
<div class="animated-box scale-up-with-mouseout">Hover me</div>
<p>Scale up (works)</p>
</div>
</div>
as a newbie in CSS animations i'm trying to make some spinners,
Unfortunately i am not able to make repeat a cycle of animations and i'm searching help!
Here is the code:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
I even tried with infinite attribute but obviously it continues to repeat every block:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
So in conclusion:
block1 executes, block2 executes, block3 executes, block4 executes then repeat from block1
You will need to create a keyframe for each block:
.rotate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg) ;
display: flex;
flex-wrap: wrap;
width: 100px; /* change this to control the size */
}
.rotate div {
flex:1 1 48%; /* little less than 50% to consider the margin */
margin: 1px;
background-color: black;
animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
content: "";
display: block;
padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}
/* [0% first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80% pause 100%] */
#keyframes fade1 {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
20%,100% {
opacity: 0;
}
}
#keyframes fade2 {
0%,20% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
40%,100% {
opacity: 0;
}
}
#keyframes fade3 {
0%,40% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
60%,100% {
opacity: 0;
}
}
#keyframes fade4 {
0%,60% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
80%,100% {
opacity: 0;
}
}
<section class="animation rotate">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
I have 2 images with transparent background and need to put one on top of each other with the same positioning:
1 spinning (underneath)
1 fixed (above)
I need to have the whole image composition to be centered and to have its size adjusted depending on the window size.
I used an ::after pseudo element for the fixed one but couldn’t get its position and size to follow the spinning one.
I suppose the background-size property should be involved but didn’t manage to use it properly.
Would appreciate any advice, even if it involves going with a totally different approach than the ::after pseudo class.
Many thanks.
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: absolute;
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
Something like this?
EDIT: Instead of setting the image as a background using the ::after pseudo-class, I added the fixed image into the html. I also eliminated one of your containers.
I centred the animated image using text-align:center and centred the fixed image using position: absolute
I set both images to 30% width relative their parent .engine-container
The fixed image has a higher z-index than the animated image so that it always appears over it. The images also change size accordingly, relative to window size.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container {
text-align: center;
position: relative;
}
.engine-rotating,
.engine-fixed {
width: 30%;
}
.engine-fixed {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
<img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
</div>
</div>
UPDATE
Heres what I came up with:
A similar effect using ::after. I was able to achieve this by inserting the image url into the content: rule, rather than setting a background image.
body {
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container {
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
text-align: center;
position: relative;
}
.engine-rotating{
}
.engine-container::after{
content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5000;
}
.spin{
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: running;
}
#keyframes spin{
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
</div>
</div>
Set position for .engine-complete::after to relative
.engine-complete::after {position: relative}
body{
width: 100%;
height: 100%;
background-color: #000;
text-align: center;
color: #fff;
}
.main-container{
background-color: #00f;
width: 50%;
margin: 0 auto;
}
.engine-container{
}
.engine-complete{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.engine-complete::after{
content: "";
position: relative; /* this was changed */
width: 191px;
height: 192px;
top: 1px;
left: 0;
background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png);
}
.engine-rotating{
width: 50%;
height: auto;
}
.spin {
animation-duration: 15s;
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function:linear;
animation-play-state: running;
}
#keyframes spin {
from {
transform:rotate(360deg);
}
to {
transform:rotate(0deg);
}
}
<div class="main-container">
<h1>spinning engine</h1>
<div class="engine-container">
<div class="engine-complete">
<img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>
</div>
</div>
</div>
I have a problem with scaling in CSS. div.container has transform: scale(0.1), so because of normal font size, h1 in this element has transform: scale(10).
After hover, div.container has transform: scale(0.5) and h1 transform: scale(2). Everything is animated (transition: all 1s ease-in-out).
However, animation of h1 isn't as fast as animation of div.container, so after hover, h1 is very big at the beginning of animation, and then quicky shrinks.
I think it's happening because of h1 should have invert easing. But what easing is invert to ease-in-out? Or is the problem elsewhere?
Note: I can't scaling only div.image. This code is only example. I have to scaling div.container.
.container, .title {
transition: all 1s ease-in-out;
}
.image {
background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
height: 300px;
width: 800px;
}
.container {
transform: scale(0.1);
}
.title {
margin: 0;
text-align: center;
padding-top: 1rem;
transform: scale(10);
}
.container:hover {
transform: scale(0.5);
}
.container:hover .title {
transform: scale(2);
}
<div class="container">
<div class="image">
</div>
<h1 class="title">Title</h1>
</div>
I found out that it doesn't work with linear easing. So, problem is not in easing.
.container, .title {
transition: all 1s linear;
}
.image {
background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
height: 300px;
width: 800px;
}
.container {
transform: scale(0.1);
}
.title {
margin: 0;
text-align: center;
padding-top: 1rem;
transform: scale(10);
}
.container:hover {
transform: scale(0.5);
}
.container:hover .title {
transform: scale(2);
}
<div class="container">
<div class="image">
</div>
<h1 class="title">Title</h1>
</div>
What can I do to avoid the image blurry/flickering issue when using CSS transform? I've tried a bunch of suggestions from CSS transition effect makes image blurry / moves image 1px, in Chrome?, but cannot seem to figure it out.
I've attached the plunker code below.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css
/* Styles go here */
.sectors {
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
}
.sectors__section__title {
font-size: 32px;
line-height: 48px;
}
.sectors-icon .sectors-icon-container{
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
opacity: 1;
transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
}
#keyframes floating_fixed_income {
0% {
transform: translate(0%,0%);
}
12.5% {
transform: translate(-2%,1%);
}
25% {
transform: translate(-4%,2%);
}
50% {
transform: translate(-2%,3%);
}
62.5% {
transform: translate(0%,2%);
}
75% {
transform: translate(1%,1%);
}
100% {
transform: translate(2%,0%);
}
}
.sectors-icon-container.fixed_income {
animation-name: floating_fixed_income;
animation-duration: 5s;
height: 112px;
background-size: 112%;
width: 112px;
margin-left: 73%;
margin-top: -11%;
}
I think it's a bug. Not as neat but my recommendation is to just go with animating an absolutely positioned element for now. You can position your sectors-icon where you want it, give it relative positioning and then add the hovering animation to it's child img with absolute positioning:
#keyframes floating_fixed_income {
0% {
top: 0;
}
12.5% {
top: 20px;
}
25% {
top: 10px;
}
50% {
top: 100px;
}
62.5% {
top: 50px;
}
75% {
top: 20px;
}
100% {
top: 0;
}
}
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview