i wanted to create a box with a border and inside it a small div, i wanted when i have a hover over the box the small div inside it will start to animate and but the animation did not start at all, so i deleted hover also the animation did not work in this case too,
here what i have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
Scss:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I am trying to try many animations effects like making the box move to right and go back to initial position and many more animations
This should work
.col__animation {
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
}
.col__animation #object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
animation: mymove 3s infinite;
}
#keyframes mymove {
0% {
margin-left: 0px;
}
50% {
margin-left: calc(100% - 40px);
}
100% {
margin-left: 0px;
}
}
Codepen
Related
I have a simple card which zooms on hovering. The card text has a backdrop blur. When I hover the card, the transition goes smoothly, but the bottom edges of the text container seem to flicker.
.card{
width: 200px;
height: 250px;
border-radius: 10px;
transition: transform 0.5s;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
margin: 50px;
transition: transform 0.5s;
will-change: transform;
}
.card:hover{
transform: scale(1.05);
}
.card-details{
background-color: rgb(255 255 255/60%);
backdrop-filter: blur(5px);
padding: 15px;
font-size: 30px;
}
<div class="card">
<div class="card-details">
Lorem Ipsum
</div>
</div>
Any suggestions?
You can try to using border: 2px solid transparent; for the entire card, this will prevent flickering, but you will get a border instead of a flickering effect. If you try to change the color of the border, you will get back a flikering effect.
Another way, more complicated, you will need to add a pseudo-element to the card-details class, then move backdrop-filter, background-color to the pseudo-element.
UPDATED
It also works with padding: 2px instead of border: 2px solid transparent;
body {
display: flex;
justify-content: center;
gap: 1rem;
}
.card,
.card2,
.card3 {
width: 200px;
height: 250px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');
/* margin: 25px; */
transition: transform 0.5s;
will-change: transform;
}
.card2 {
border: 2px solid transparent; /* trick */
}
.card:hover,
.card2:hover,
.card3:hover {
transform: scale(1.05);
}
.card-details {
background-color: rgb(255 255 255/60%);
backdrop-filter: blur(5px);
padding: 15px;
font-size: 30px;
}
.card-details3 {
padding: 15px;
border-radius: 0 0 8px 8px;
border: 2px solid transparent; /* trick */
font-size: 30px;
position: relative;
}
.card-details3::after {
content: '';
position: absolute;
inset: 0;
background-color: rgb(255 255 255/60%);
backdrop-filter: blur(5px);
border-radius: inherit;
z-index: -1;
}
<div class="card">
<div class="card-details">Lorem Ipsum</div>
</div>
<div class="card2">
<div class="card-details">Lorem Ipsum</div>
</div>
<div class="card3">
<div class="card-details3">Lorem Ipsum</div>
</div>
working on SCSS transition I made two classes trigger and box and while hovering on trigger box should start moving and rotating.
.trigger {
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 25% 25%;
&:hover {
.box {
transform: translate(200px, 150px) rotate(20deg);
}
}
}
.box {
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
the effect works fine on chrome
[1]: https://i.stack.imgur.com/E2CnC.png
however Firefox scales the trigger borders
[2]: https://i.stack.imgur.com/6OVW4.png
the jade code
.trigger
.box
I added position: relative to .trigger and position: absolute to the box. I didn't have your html so I took a guess at what it might look like. this solution seems to work at least in codepen (I viewed in Chrome and Firefox and both are working). I had to modify your scss to css in this example in order to tinker with it in codepen and post here.
.trigger {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
background-color: #ddd;
outline: 20px solid #999;
position: relative;
margin: 5% 25%;
}
.trigger:hover .box {
transform: translate(200px, 150px) rotate(20deg);
}
.box {
position: absolute;
display: inline-block;
background-color: pink;
width: 100px;
height: 100px;
transition: transform 1000ms ease-in-out;
}
<div class="trigger">
<div class="box"></div>
</div>
I'm learning about CSS animations and am trying to animate this stamp which uses relative and absolute positioning. I want the animation to:
Start at it's original size.
Grow 2-3xs that size and be at the center of the screen.
Pause for 2-3 seconds seconds.
Shrink back down to it's original size and spot.
The problem I'm running into is keeping the elements positioned on top of the stamp in the same place as the transitions occur. Looking to keep it pure CSS if possible (*side note I haven't added any web-kit/browser support yet because I'm just trying to make it work first).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 90vh;
justify-content: flex-end;
align-items: flex-start;
background: grey;
}
.park-img {
width: 10rem;
height: 11.2rem;
display: inline-block;
margin-left: 2px;
padding: 10px;
background: white;
position: relative;
top: 2rem;
left: -2rem;
/*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient( transparent 0px, transparent 4px, white 4px, white);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
/*Animation*/
animation: stampAnimation 9s ease-in-out;
}
#keyframes stampAnimation {
0% {}
50% {
transform: scale(3, 3) translate(-35%, 35%);
}
75% {
transform: scale(3, 3) translate(-35%, 35%);
}
}
.stampText {
position: relative;
top: -1rem;
left: -1.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fafafa;
text-transform: uppercase;
animation: stampAnimation 9s ease-in-out;
}
.park-name {
font-weight: bold;
text-align: center;
font-size: 1rem;
}
.park-title {
width: 90%;
overflow: hidden;
text-align: center;
font-size: .5rem;
}
.park-title:before,
.park-title:after {
background-color: #fafafa;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 10%;
}
.park-title:before {
right: 0.5rem;
margin-left: -50%;
}
.park-title:after {
left: 0.5rem;
margin-right: -50%;
}
<div class="park-stamp">
<img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img" />
<div class="stampText">
<div class="park-name">Zion</div>
<div class="park-title">National Park</div>
</div>
</div>
As well as the codepen:
https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100
I have edited your code to make changes that are different from my initial answer.
Check https://codepen.io/udabasili/pen/VwmqmQK?editors=1100.
Basically, I created a css for the container of your element and moved the animation there. I also removed the translate from your animation. Check the css in the codepen to see the changes
.park-stamp{
animation: stampAnimation 9s ease-in-out infinite;
}
I'm currently trying to make it so when you hover over this div, it slowly expands outward from the side of the page. I realize I can just set a new position when hovering, but it doesn't slowly pull out from the side. My code is probably flawed majorly but I'm not entirely sure how to fix it. Any help would be great. Thank you!
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
animation-name: moves;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: alternate;
}
#bod:hover {
cursor: pointer;
#keyframes moves {
from {
margin-left: -90px;
}
to {
margin-right: -10px;
}
}
}
<h1>Test</h1>
<div id="bod"></div>
Your syntax is incorrect. In order to apply the animation to the element on hover, change the animation property rather than adding the #keyframes declaration like you were doing.
In addition, you were animating from margin-left to margin-right, which probably isn't what you want. Here is an updated example animating the margin-left property. I also used the animation shorthand to condense the code as well.
You will probably also want to change the animation-fill-mode property value to forwards as well so that the final keyframe is maintained when the animation ends:
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
}
#bod:hover {
cursor: pointer;
animation: moves 4s forwards;
}
#keyframes moves {
from {
margin-left: -90px;
}
to {
margin-left: -10px;
}
}
<h1>Test</h1>
<div id="bod"></div>
As a side note, a transition may also work better since your animation won't reverse when hovering off of it. Here is a similar example using CSS3 transitions:
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
transition: margin-left 4s;
}
#bod:hover {
cursor: pointer;
margin-left: -10px;
}
<h1>Test</h1>
<div id="bod"></div>
Try adding values to margin-left and margin-right for both. And take the #keyframes out. It works like magic. See below.
#bod {
background-color: red;
height: 100px;
width: 200px;
border: 2px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: -90px;
float: left;
animation-name: moves;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: alternate;
}
#bod:hover {
cursor: pointer;
animation: moves;
}
#keyframes moves {
from {
margin-left: -90px;
margin-right: 0;
}
to {
margin-left: 0;
margin-right: -10px;
}
}
<h1>Test</h1>
<div id="bod"></div>
this has been trying my patience for about an hour so I thought I would ask.
I need to have three divs, centered inside another div that is inside another div lol. Here is what the code I have looks like.
HTML
<div id="frontnav">
<div id="front1" class="frontboxes">
<h2>Gold</h2>
</div>
<div id="front2" class="frontboxes">
<h2>Green</h2>
</div>
<div id="front3" class="frontboxes">
<h2>Blue</h2>
</div>
</div>
CSS
/* FRONT PAGE BOXES */
#frontnav {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 300px;
transition: all 2s;
-moz-transition: all 2s;
/* Firefox 4 */
-webkit-transition: all 2s;
/* Safari and Chrome */
-o-transition: all 2s;
/* Opera */;
}
#front1 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
#front2 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
#front3 {
text-align: center;
float: left;
height: 200px;
width: 30%;
box-shadow: 0px 0px 19px #615D69;
}
.frontboxes {
margin: 6px;
}
div element can only be center by setting margin css property as
margin: 0px auto;
The text-align:center; declaration needs to be on the outermost div, i.e. frontnav in your example.
Change the last rule to:
.frontboxes {
margin: 6px auto;
}
and remove the float: left;s.