I am trying to change the size of the text when Hover over the word Internet, without changing any of its other properties. When over over the word I am trying to decrease the size of the word
Here is my code that I tried to achieve this functionality
h1:hover::before,
h1:hover::after {
width: 100%;
}
h1::before {
top: 0;
left: 0;
}
h1::after {
top: 100%;
right: 0;
}
#text:hover{
color:white;
-webkit-transform: scale(1.2);
}
<body>
<div class="text-wrapper">
<h1 id='text'>
Hot</h1>
</div>
</body>
Like the comments suggested, you need to add a transition to the h1 css:
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
// Set transition...
transition: transform .7s ease;
}
And set a low scale transform:
#text:hover {
color: white;
// Scale transform...
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Fiddle around with the scale setting and the transition duration to adjust size of the text and the speed of transition respectively.
Edit:
If I have understood your comment correctly, you want the on hover lines to animate its width and then "disappear" - we can just reverse the animation from full width to nothing for that. For this you need to use the animation attribute along with #keyframes.
I have changed the lines the other way round so the top line goes from right to left and bottom line from left to right as per your comment, by changing the h1::before left attribute to right:0; and vice-versa for the h1::after.
Then you need to specify the animation on the hover rule:
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
For more information on the animation attributes: w3schools and Mozilla docs.
And specify the animation itself via #keyframes:
#keyframes slide {
from {width:0%}
to {width:100%}
}
Info on the #keyframes: Mozilla docs
body {
Background: #7a86cb;
text-align: center;
}
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
transition: transform .7s ease;
}
h1::before,
h1::after {
content: "";
position: absolute;
height: 2px;
background: #6849e3;
}
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
h1::before {
top: 0;
right: 0;
}
h1::after {
top: 100%;
left: 0;
}
#text:hover{
color:white;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
#keyframes slide {
from {width:0%}
to {width:100%}
}
<body>
<div class="text-wrapper">
<h1 id='text'>
INTERNET </h1>
</div>
</body>
Related
i have a slider made in owl carousel in which i have added an extra image and done some css for its animation, the live url of the website is live website
i have done the following css to make the image move according to the other images in slider:
#-webkit-keyframes test {
0% {
background-image: url('assets/slider1.2.png');
}
25% {
background-image: url('assets/slider2.2.png');
}
75% {
background-image: url('assets/slider3.2.png');
}
100% {
background-image: url('assets/slider4.2.png');
}
}
#bg1 {
float: left;
left: 0;
background-image: url('assets/slider1.2.png');
transition: 6s ease-in-out;
-webkit-animation-name: test;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: 3000;
-webkit-animation-delay: 6s;
-webkit-animation-direction: initial;
-webkit-animation-timing-function: steps(1, end);
}
#bg1.bgactive {
background-image: url('assets/slider4.2.png');
}
.animate-left {
transform: translateX(-100%);
height: 90%;
border-radius: 30px;
padding: 45px 40px;
width: 50%;
position: absolute;
top: 0;
left: 0;
background-position: 25% 75%;
display: flex;
align-items: center;
opacity: 0;
transition: 1s ease-in-out;
}
.animate-left.active {
opacity: 1;
transform: translateX(0%);
}
<div class="animate-left active">
<div class="bg-shape" id="bg1">
</div>
</div>
as you can see in the website, in the first two slides all images are coming fine, in th third and forth slides the image which i did css is blinking, not coming properly. can anyone please tell me what did i do wrong in here, thanks in advance
I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I am trying to experiment with CSS Animation and made a simple page transition effect using only Css animation. The problem is when the animation completes, a slight flicker is created. Can you guys suggest some thing to fix this?
Codepen link- https://codepen.io/jake2917/pen/qyzxva?editors=1100
Here is the code.
The problem start when i try to center the h1 tag.
body {
margin: 0;
padding: 0;
}
#line {
border: 0.5px solid #130f40;
opacity: 0;
width: 0;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
top: 50%;
animation-name: run;
animation-duration: 1s;
transition: 0.1s ease-in;
}
#container1 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
top: -110%;
transition: 0.2s ease-in;
animation-name: cover1;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#container2 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
bottom: -110%;
transition: 0.2s ease-in;
animation-name: cover2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes run {
from {
width: 0;
opacity: 0;
}
to {
width: 99%;
opacity: 1;
}
}
#keyframes cover1 {
0% {
top: -10%;
opacity: 0;
height: 0;
}
100% {
top: 0%;
opacity: 1;
height: 50vh;
}
}
#keyframes cover2 {
0% {
bottom: -110%;
opacity: 0;
height: 0;
}
100% {
bottom: 0%;
opacity: 1;
height: 50vh;
}
}
// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
text-align: center;
}
<div id="line"></div>
<div id="container1">
<h1>hello there</h1>
</div>
<div id="container2">
<h1>hello there</h1>
</div>
It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}
I want when the component is open to make an animation or to make a fade.
This is the code
This is the HTML
<div *ngIf="showMePartially" class="container">
<div class="body-container">
</div>
</div>
This is the CSS
.container {
position: fixed;
z-index: 1;
padding-top: 100px;
transition: opacity 0.5s ease-in;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: 3s;
}
.body-container {
width: calc(100% - 73em);
position: relative;
left: 70em;
top: 7.5em;
background: white;
height: calc(100% - 18em);
border-radius: 4px;
padding-left: 11px;
transition: opacity 0.5s ease-in;
animation-direction: normal;
}
You can use css animation:
.body-container {
/* above styles */
animation: animation-name .3s ease-out forwards;
}
#keyframes animation-name {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can make your own animation inside of keyframes. This should work, because *ngIf will either remove element from dom, if condition is false, or append it into dom(this is when animation should work).
EDIT
For left to right animation you can do like:
#keyframes animation-name {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
i have a problem when making Flip Clock animation
the animation will perform like this reference
reference : http://hilios.github.io/jQuery.countdown/
so far, this is my work.
demo : https://jsfiddle.net/s3qk25m7/1
i try this one :
HTML :
<div class="time">
<span class="count top flipTop">2</span>
<span class="count top">1</span>
<span class="count bottom flipBottom">1</span>
<span class="count bottom">2</span>
</div>
CSS :
.time {position: relative; height: 95px; width: 65px;
perspective: 200px; backface-visibility: hidden;
transform: translateZ(0); transform: translate3d(0,0,0);
}
.count {background: #202020; color: #f8f8f8; display: block;
font-size: 2em; line-height: 2.4em; overflow: hidden;
position: absolute; text-align: center;
top: 0; width: 100%;
}
.top {height: 50%; line-height:95px; transform-origin: 50% 100%; }
.bottom {line-height: 0; height: 50%; top: 50%; transform-origin: 50% 0; }
#keyframes flipTop {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
#keyframes flipBottom {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.flipTop {
animation-name: flipTop;
animation-duration: 0.25s;
animation-fill-mode: both;
}
.flipBottom {
animation-name: flipBottom;
animation-duration: 0.25s;
animation-delay: 0.25s;
animation-fill-mode: both;
}
the animation not working properly. how to solve this issue?
what's wrong with my code?
thanks in advance...
The issue is that the animated div is behind the static.
To fix this add z-index: 1 to your .flipPosition class.
Check out this updated fiddle
Edit: note that the lower div's number seems to be updated too early
Edit 2: I just realized that ngAnimateSwap would probably be perfect for this!