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
Related
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>
I tried making divs as buttons that link to another subpage. I animated them so they rotate in when going on the site. Now I want to make a hover effect that scales the buttons. But it seems like it doesn´t get recognized. When I comment the animaton out it works. Is there a way to have the animation and the hover effect?
Thanks in advance!
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform: rotateY(90deg);
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
} animation-delay: 0.5s;
#keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
}
.animation-links div:hover {
transform: scale(1.10);
}
It is because animation-fill-mode: forwards;
If the value for animation-fill-mode is not none then when animation ends it will not apply the css property values.
So I have removed animation-fill-mode: forwards; from #animation-1 style rule and transform: rotateY(90deg); from .animation-links div style rule. Also there were some extra { and style set outside the braces. I have removed those as well.
See the Snippet below:
.animation-links div {
background: #444;
margin: 10px;
text-align: center;
height: 100px;
transform-origin: center;
}
#animation-1 {
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
animation-name: animated;
animation-duration: 1s;
/*animation-fill-mode: forwards;*/
animation-delay: 0.5s;
transition: transform 1s ease;
}
#keyframes animated {
0% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(0);
}
}
.animation-links div:hover {
transform: scale(2);
}
<div class="animation-links">
<div id="animation-1">Animation 1</div>
</div>
You can test it here also.
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 have a 'bouncing loader' div, in which moves up and down on an infinite loop (see this jsfiddle
However, if I place a button below it, (or anything else for that matter), it will also move in time to the animation effect.
Is there anyway of stopping this button from moving?
I have tried adding margins/padding on both, but they didn't work so I removed them.
the loader html:
<div class="loader" style="float:initial;">
<span></span>
<span></span>
<span></span>
</div>
<br />
<div>
<button id="popupArea">Click here to invoke a popup window</button>
</div>
with the css being:
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
#-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
#-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
As always, any help/advice is welcomed.
Please note, I'm don't know jquery, so would like to avoid it as much as possible (hence i'm using asp MVC)
Just add the following css attribute:
#popupArea {
position:fixed;
top:100px;//you can change the value as you wish
}
Example here.
try like this
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
#-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
#-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
<div class="loader" style="height:100px;">
<span></span>
<span></span>
<span></span>
</div>
<br />
<div>
<button id="popupArea">Click here to invoke a popup window</button>
</div>
Try to put height at loader's div .
.loader {
text-align: center;
height:85px;
}
http://jsfiddle.net/csdtesting/9emc9so9/4/
Simple, just set the height for the span
Set height: 100px; in the loader
.loader {
text-align: center;
height:100px;
}
Here is a DEMO
Trying to make a css animation that fades in on an image from the center by using two centered divs with the same background image [svg], and animating their width and background position. The problem is, on chrome, there's a terrible jitter problem (Maybe from chrome cycling through the animation steps, instead of doing them simultaneously?)
Here's the jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/, where you can see the jitter problem on the left one (which has simultaneous width animation and background-position animation).
Relevant Code (sorry for some leftover stuff from the site it's in)
HTML:
<div class="underheader-wrapper uhw-title">
<div class="underheader uhleft undertitle"> </div>
<div class="underheader uhright undertitle"> </div>
</div>
And CSS:
.undertitle {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg);
}
.underheader-wrapper {
position: relative;
margin: auto;
width:320px;
height:100px;
}
.underheader {
-webkit-backface-visibility: hidden;
position:absolute;
width: 0px;
height:100px;
opacity: 0;
background-size: 320px 60px;
background-repeat: no-repeat;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part1; -webkit-animation-name:part1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhleft {
background-position: -160px 40px;
right: 160px;
-webkit-backface-visibility: hidden;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part2; -webkit-animation-name:part2;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}
.uhright {
background-position: -160px 40px;
left: 160px;}
#-webkit-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
#-webkit-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
width: 160px;
background-position: 0px 40px;
opacity: 1;
}}
#-moz-keyframes part1 {
from {
width: 0px;
opacity: 0;
}
to {
width: 160px;
opacity: 1;
}}
#-moz-keyframes part2 {
from {
background-position:-160px 40px;
width: 0px;
opacity: 0;
}
to {
background-position: 0px 40px;
width: 160px;
opacity: 1;
}}
Am I stuck with this jitter? I already did a JQuery version, and found people saying that CSS was cleaner/smoother, but the jitter still happens.
Okay, didn't find a way to use dual divs to achieve this goal. Instead, I did something like this.
<div class="outer">
<div class="middle">
<div class"inner">
 
</div>
</div>
</div>
and then styled them
.outer {
position: relative;
width:321px;
height:100px;
padding: 15px;
}
.middle {
text-align: center;
position: absolute;
left: 160px;
margin:auto;
background-image:url(images/underheader.svg);
background-position:center center;
background-size: 320px 70px;
background-repeat: no-repeat;
/*all the animation stuff */
}
.inner {
position: relative;
display: inline-block;
width: 0px;
height: 100px;
/* all the animation stuff */
}
I then animated the middle div from left:160px to left: 0px and the inner div from width: 0px to width: 320px. I used CSS animation, though it could easily be done with jquery or CSS transitions.
The delay you see on Chrome is given by -webkit-animation-delay:3s;. Change it to -webkit-animation-delay:0s; and you'll see it will start fade in immediately.