Can somebody tell me how can i do this animation on hover please ?
Here some CSS code :
the effect is like a shake but it's not like the GIF
the effect is like a shake but it's not like the GIF
the effect is like a shake but it's not like the GIF
the effect is like a shake but it's not like the GIF
the effect is like a shake but it's not like the GIF
https://codepen.io/meruem92/pen/ZEoPWgP
.carousel-item {
transition: font-size 1s;
text-decoration: none;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
&:before,
&:after {
display: block;
content: attr(data-glitch);
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
}
&:after {
color: #fff;
z-index: -2;
}
&:before {
color: #ffffff69;
z-index: -1;
}
&:hover {
font-size: 35px !important;
&:before {
animation: glitch 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 2;
}
&:after {
animation: glitch 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 2;
}
}
#keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-5px, 5px); }
40% { transform: translate(-5px, -5px); }
60% { transform: translate(5px, 5px); }
80% { transform: translate(5px, -5px); }
to { transform: translate(0); }
}
}
<p data-glitch="Explore" class="carousel-item"> lorem ipsum </p>
You will want to use the CSS pseudo :hover to make the animation work. Something like this:
div {
font-size:16px;
transition: all .3s ease;
}
div:hover {
font-size:20px;
}
Related
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
In this snippet, using keyframes and animation and display none/block, the div animates to slide down on hover.
h1 { padding: 20px; }
div {
width: 100%; background: pink; padding: 20px;
display: none;
}
body:hover div {
display: block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}
#-webkit-keyframes slide-down {
0% { opacity: 0; -webkit-transform: translateY(-100%); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
#-moz-keyframes slide-down {
0% { opacity: 0; -moz-transform: translateY(-100%); }
100% { opacity: 1; -moz-transform: translateY(0); }
}
<div>Hello</div>
<h1>Hover me</h1>
How can it be made to also slide back up when hover is removed?
Try applying the transition property to the actual element:
h1 { padding: 20px; }
div {
position: absolute;
width: 100%; background: pink; padding: 20px;
visibility: hidden;
opacity: 0;
transform: translateY(0);
transition: all .3s ease-out;
}
body:hover div {
visibility: visible;
opacity: 1;
transform: translateY(100%);
}
<div>Hello</div>
<h1>hover me</h1>
I would like to add to add this css example to my button on my website
https://codemyui.com/ghost-button-glint-effect-3d-button/
I already tried pasting the css code in the wordpress customizer add css input...
I adjusted the class to my button....
.btn--primary
but it doesn't work
hope anybody can help me.
Thanks in advance!
#-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
#keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="wrapper">
Shiney!
</div>
I managed to get this integrated in my WordPress installation. Try using the !important tag incase there are some predefined classes in your template.
I have titles that I want to add CSS3 animation to it
I want to transform
Title
to
[Title]
And I want the square brackets to animate from the center of the word to the borders of it with animation.
something like..
Ti[]tle
to
[Title]
with animation (ofcourse i'm using :before :after to add the brackets with opacity 0 to 1)
my p style:
p:before {
content: "[";
position: absolute;
left: 50%; /*to add the bracket to the center of the word*/
opacity: 0;
transition: all 0.7s ease;
}
Thank You !
p {
display: table;
position: relative;
}
p:before,
p:after{
position: absolute;
opacity: 0;
transition: all 0.7s ease;
}
p:before {
content: "[";
left: 50%;
}
p:after {
content: "]";
right: 50%;
}
p:hover:before {
left: -5px;
opacity: 1;
}
p:hover:after {
right: -5px;
opacity: 1;
}
<p>Title</p>
<p>A Longer Title</p>
Is this what you are looking for?
with this html:
<div>
TESTING
</div>
and these css's:
div{
padding: 18px 0 18px 0;
display: inline-block;
margin-right: 40px;
}
a {
color: #999;
display: inline-block;
text-align: center;
width: 200px;
text-decoration: none;
}
a:before, a:after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
a:before {
margin-right: 10px;
content: '[';
-webkit-transform: translate(20px, -1px);
-moz-transform: translate(20px, -1px);
transform: translate(20px, -1px);
vertical-align: top;
}
a:after {
margin-left: 10px;
content: ']';
-webkit-transform: translate(-20px, -1px);
-moz-transform: translate(-20px, -1px);
transform: translate(-20px, -1px);
}
a:hover:after {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
a:hover:before {
opacity: 1;
-webkit-transform: translate(0px, -1px);
-moz-transform: translate(0px, -1px);
transform: translate(0px, -1px);
}
You get this JSFIDDLE
You can achieve this using frame animations. This way you won't have to hover the element (or anything else) for the animation to start.
See: http://jsfiddle.net/Paf_Sebastien/j2cvagjf/
Set :before and :after like this :
h1:before {
content: "[";
position: absolute;
display: block;
top: 0;
-webkit-animation: bracketleft 1s 1 forwards;
animation: bracketleft 1s 1 forwards;
}
Then handle the animation :
#-webkit-keyframes bracketleft {
0% { opacity: 0; left: 50%; }
100% { opacity: 1; left:-10px; }
}
#-webkit-keyframes bracketright {
0% { opacity: 0; right: 50%; }
100% { opacity: 1; right: -10px; }
}
I found a CSS loading spinner here and it works great in IE and Firefox but I can't get it work in Chrome.
I added -webkit to the CSS provided but still nothing. Here is a JSFiddle of the code, test it out in the different browsers.
Is there anything I'm doing wrong or not adding?
HTML"
<div class="small progress"><div>Loading…</div></div>
<div class="progress"><div>Loading…</div></div>
<div class="large progress"><div>Loading…</div></div>
CSS:
#keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 1s infinite steps(8);
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
-webkit-transform-origin: 50% 2.5em;
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
background: #bbb;
}
Add this :
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
Link : Doc