there I am trying to build a search bar in which if you hover over the search icon it should expand. But animating the width directly is not performant, so I decided to use transforms but it is not scaling the search bar properly.
Here are the screenshots.
when using normal width
image
When using transform
image
CSS code:
.searchBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 8px;
}
.search-content {
font-size: 10px;
}
.search-input {
width: 0px;
background-color: transparent;
padding: 0.5rem;
padding-right: 2rem;
border-radius: 2rem;
border: none;
outline: none;
transition: 0.2s;
}
.searchBox:hover > .search-input {
/* width: 8rem; */
transition: scaleX(8rem);
padding: 0.5rem;
padding-right: 2rem;
background-color: rgb(240, 245, 248);
box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}
.searchSvg {
position: absolute;
right: 0.62rem;
transition: 0.3s;
display: grid;
place-items: center;
}
Here is the link of codesandbox
transform: scaleX(8rem) will not work, you should change it to a plain number without any unit.
Also, I don't think you should use transform: scale() on an input as it would make the text stretched out.
In this case, using the width property for the hover effect is not really affect the overall performance I think.
try this, works fine (just add to below of your css codes):
.search-input {
transition: width 1s;
}
.search-input:hover,.searchBox:hover .search-input{
width: 200px;
}
Related
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 am trying to show the amount text as vertically horizontal just like Mozilla developer page shows for browser support but using flex CSS eg. https://developer.mozilla.org/en-US/docs/Web/CSS/transform (check in bottom of the page)
I have tried the flex CSS almost I have achieved it, but the text is breaking and its not center and bottom end align.
CSS
ul.chart-bg {
width: 100%;
height: 100%;
border-bottom: 1px solid #ccc;
padding: 0;
display: flex;
justify-content: space-between;
}
.container {
flex: 1 1 auto;
list-style: none;
margin-left: 15px;
display: flex;
align-items: flex-end;
}
ul li.container:nth-child(1) {
margin: 0 !important;
}
.skills {
flex: 1 1 auto;
padding: 0;
width: 100%;
animation: draw 1s ease-in-out;
background-color: #e9e9e9;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
display: flex;
align-items: flex-end;
}
.amount {
flex: 1 1 auto;
color: #9c9c9c;
font-family: "sans-serif";
transform-origin: 0 0;
transform: rotate(-90deg);
animation: amountVal 2s ease-in-out;
}
trying to bring the amount text in vertical alignment using flex for bar chart, but its breaking
Fiddle: https://jsfiddle.net/snx5mqj8/1/
I changes some CSS property to perform text center
I removed transform-origin property in amount class and replace align-items: flex-end; with center in skill class and add white-space CSS property to see amount and text in one line
Here is your fiddle: https://jsfiddle.net/df6uraLw
If you want it to look exactly like the one in mozilla you'll need writing-mode and absolute positioning, here i did it without flexbox, using writing-mode and position:absolute, it aligns really well, see if it works for you https://jsfiddle.net/k6gcxysr/
.skills {
padding: 0;
width:100%;
animation: draw 1s ease-in-out;
background-color: #e9e9e9;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
position: relative;
}
.amount {
color: #9c9c9c;
font-family: "sans-serif";
animation: amountVal 2s ease-in-out;
writing-mode: vertical-rl;
position:absolute;
right:30%;
bottom:4%;
transform: rotateZ(180deg);
}
I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
Discover More <i class="btn--primary__icon icon-basic-clockwise"></i>
I think the problem is that your icon is displayed inline with zero content. I think you might need to change the icon to display: inline-block; and give it some dimensions. You'll want to set the dimensions to 0px when the icon should not be visible.
I converted your code from SCSS to CSS and replaced the $variables with actual CSS colors to make a working snippet...
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}
<a href="#" class="btn btn--primary">
Discover More
<i class="btn--primary__icon icon-basic-clockwise"></i>
</a>
I've played with following code to make softly and gently transtion effect when onclick. Toggle elements opens itself very fast and hard. I would like make it a bit softer. Actually I don't have any idea which class or ID or selector would make affect it.
Demo: jsfiddle
CSS:
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
You could change the following rules in this way:
.toggle-box + label + div {
max-height: 0;
margin-bottom: 10px;
transition: max-height 0.15s linear;
overflow: hidden;
}
.toggle-box:checked + label + div {
height: auto;
max-height: 1000px;
transition: max-height 3s linear;
}
Max-height needs to be setted to a value which your div will never reach.
Here is updated jsfiddle
The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width
secondly dont use position: absolute and float it exclude each other
try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default
display: block; so it would behave similiar like text.