I want to start a animtion on click of a div and after the animtion is done it just keeps it position. I fixed the anitmtion that i works on reloading the page but didnt fix it for onclick do you guys have an idea??
.tsx file:
import styles from "./WaterTracker.module.css";
export default function WaterTracker() {
return (
<div className={styles.mainContainer}>
<div className={styles.wrapper}>
<div className={styles.mainContent}></div>
</div>
</div>
);
}
.css file :
:root {
--background: #f8f8f8;
--dark: #303032;
}
.mainContainer {
box-sizing: border-box;
margin: 0 0;
padding: 0 0;
}
.wrapper {
background: var(--background);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mainContent {
position: relative;
background: var(--dark);
border: 0.25em solid var(--dark);
height:8rem;
width: 8rem;
outline: 0.25;
overflow: hidden;
}
.mainContent::before {
content: "Drink je water";
font-size: 2rem;
color: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.mainContent::after {
content: "";
position: absolute;
background: var(--background);
height: 200%;
width: 200%;
bottom: -50%;
left: -50%;
border-radius: 45%;
animation: spin 6s ease-in-out forwards;
}
#keyframes spin {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-100%) rotate(500deg);
}
}
I hope that when this works i also can change the tranlateY from -100% to any number with a button so the animtion will first go to -50% and when i click on the button to -100% if you guys have a fix for this as whel it would be nice
You can use Ionic's Animation. Check out the docs for examples. https://ionicframework.com/docs/utilities/animations
Related
I want to appear and dissappear my ion-icon whenever I click the button "next and prev"..So basically something like this
const [next,setnext] = useState(false)
const [prev,setprev] = useState(false)
{next ?
<div className="big-next">
<ion-icon name="play-forward-outline"></ion-icon>
</div>
: <></>}
{prev ?
<div className="big-prev">
<ion-icon name="play-back-outline"></ion-icon>
</div>
: <></>}
<div className="prev" onClick={e => {handlePrev(e);setprev(!prev)}}> <ion-icon name="play-back-outline"></ion-icon> </div>
<div className="next" onClick={e => {handleNext(e);setnext(!next)}}> <ion-icon name="play-forward-outline"></ion-icon> </div>
For my css
.sorcerers .big-next,.sorcerers .big-prev {
font-size: 80px;
color: red;
}
.sorcerers .big-next ion-icon {
width: 300px;
height: 300px;
border-radius: 100%;
background: none;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 45%;
top:30%;
opacity: 0;
animation: fade 2s ease-in-out forwards;
}
.sorcerers .big-prev ion-icon {
width: 300px;
height: 300px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:30%;
left: 45%;
opacity: 0;
animation: fade2 2s ease-in-out forwards;
background: none;
}
#keyframes fade {
25% {
opacity: 0.3;
margin-left: 10px;
}
50% {
opacity: 0.5;
margin-left: 20px;
}
100% {
opacity: 0;
margin-left: 30px;
}
}
#keyframes fade2 {
25% {
opacity: 0.3;
margin-right: 10px;
}
50% {
opacity: 0.5;
margin-right: 20px;
}
100% {
opacity: 0;
margin-right: 30px;
}
}
It is working though but...the wrong idea about here is that it is only showing up the icon if I tried to click another one again..
My point here is whenever I click the button it will appears and then dissappear and then repeat the same process
hope you guys understand my question thankyou
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.
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;
}
lastly I'm developing a website, and I'm gonna implement here a little "button" in CSS.
My question is: How to make its shadow glowing without having to put cursor on it and hover? I want its shadow to glow automatically. I've tried to change some attributes from code below, but it doesn't work. Anybody know how to do it exactly? Any help appreciated :)
Here is some code snippet I tried to modify:
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; }
}
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
Whole code and the exact button I wanna implement can be found on: https://codepen.io/leandrosimoes/pen/VqZxaG
I want to create a button which changes on hover. Here you can check it: https://drive.google.com/file/d/1fIcil2Xyky8DC2NRcfZBKXCMHk9gpat2/view?usp=sharing.
Here you can see my attempt: https://codepen.io/koravski/pen/BEvKRP
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="txt">Call to action</div>
<div class="box"></div>
The problem is that when I hover it, it starts looping. It should be on the red rectangle so it won't loop.
If you have any suggestions it will be nice.
Thanks.
It's not quite clear what effect you are after but you're changing the size so when it shrinks you're not hovering on it any more.
I'd suggest a transform instead (two actually, one for the size and another for the position).
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
<div class="box"></div>
There are other issues but it depends on what this actually supposed to do.
In fact, you can do this with a single div.
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: relative;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 1s;
}
.txt:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
z-index: -1;
transition: all 1s;
}
.txt:hover:before {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
This is happening because whenever the button shrinks, your mouse is no longer hovering over it, so the animation comes back up and hits the box (causing it to trigger once again. I'd suggest using a pseudo element -
.box::before {
background-color: red;
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
transition: all 1s;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.box:hover.box::before {
width: 50px;
height: 5px;
}
https://codepen.io/aedenmurray/pen/XQodQj
Here is an idea using background animation where you will need only one element:
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lato', sans-serif;
}
.txt {
color: #fff;
padding:20px 50px;
background-image:linear-gradient(red,red);
background-size:100% 100%;
background-position:bottom center;
background-repeat:no-repeat;
transition:1s;
}
.txt:hover {
background-size:20% 5%;
color:#000;
}
<div class="txt">Call to action</div>
I would wrap your .box and .txt in a container, and then when that container is hovered, do the transition. That way, your hover area isn't being resized - instead the contents are.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position:absolute;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.container {
position: relative;
}
.container:hover > .box {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="container">
<div class="txt"> Call to action</div>
<div class="box"></div>
</div>
View Updated CodePen
The trick is to apply the :hover to a surrounding element.
So you keep hovering over the element and just the included block will change.
FYI:
translate3d is used for better performance than normal translateX.
You could improve the code further. The red element could be a ::before element, and you might want to attach :focus, too for better accessibility. And maybe use a button element.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.btn {
position: relative;
}
.btn-txt {
color: #fff;
text-align: center;
vertical-align: middle;
position: relative;
padding: 20px 30px;
}
.btn-box {
background-color: red;
transition: all 1s;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.btn:hover .btn-box {
width: 50px;
height: 5px;
transform: translate3d(50px, 0, 0);
top: auto;
}
<div class="btn">
<div class="btn-box"></div>
<div class="btn-txt">Call to action</div>
</div>