So I have a sticky bar and when it becomes fixed it has a little animation with before and after elements.
This works fine on Chrome but its slightly glitchy on firefox.
The site is live the link is:
http://pixelfriendlytech.co.za/
Simple demo is here:
https://jsfiddle.net/zr8gc1f7/4/
Here is the css:
#pf-bar{padding: 0px;
z-index: 1000;
top:0;
left: 0;
right: 0;
position: relative;
max-width: 2560px;}
#pf-bar:before {
content: "";
position: absolute;
top: 0;
right: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #2484C6;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
#pf-bar:after {
content: "";
position: absolute;''
top: 0;
left: calc(50% + 570px);
bottom: 0;
width: 0px;
height: 60px;
background-color: #fff;
border-bottom: 3px solid #F72244;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
z-index: -1;}
.sticky #pf-bar:before {
width: calc(50% - 570px);}
.sticky #pf-bar:after {
width: calc(50% - 570px);}
.sticky #pf-bar{
position: fixed;
width: 100%;
box-shadow: 0px 4px 10px rgba(0,0,0,.2);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;'}
Related
I'm trying to create a sort of "shooting star" animation on a button underline on hover. I've successfully achieved what I want and it's firing correctly on the first hover, but if you hover over it again the transition is glitchy and doesn't work as intended. The more you hover over it the less the width changes to the point where it no longer works.
I wondered if someone might be able to explain why this is happening?
Here is a JSFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: blue;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.btn:hover::before {
width: 0;
}
.btn:hover::after {
width: 100%;
}
<a class="btn">Button</a>
With the help of #somethinghere, I was able to resolve this myself. For anyone who might need this in the future, the reverse animation was too slow so was incomplete before hovering over the element again. Adding a transition of 0 for the reverse animation solved the problem.
jsFiddle
.btn {
position: relative;
font-size: 40px;
}
.btn::before {
content: '';
height: 1px;
width: 100%;
background-color: red;
position: absolute;
bottom: -1px;
right: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}
.btn::after {
content: '';
height: 1px;
width: 0;
background-color: red;
position: absolute;
bottom: -1px;
left: 0;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-ms-transition: all 0s ease-in-out;
transition: all 0s linear;
}
.btn:hover::before {
width: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
}
.btn:hover::after {
width: 100%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s linear;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
<a class="btn">Button</a>
How can I make padding for an arrow move the arrow to right on hover?
That is, arrow moves from the text to the right, and when hover disappears, it returns to its place.
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
right:100%;
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
<a id="next"><span class="arrow">⟶</span></a>
You can use a translation on the arrow element (the span):
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
}
#next:before {
content:"Next";
position:absolute;
color:#383736;
right: 50%;
opacity: 0;
transition: 0.6s ease-in;
padding-right: 5px;
}
#next:hover:before {
opacity: 1;
}
#next span {
display: inline-block;
transition: 0.6s ease-in;
}
#next:hover span {
transform: translateX(50%);
}
<a id="next"><span class="arrow">⟶</span></a>
try this...
#next {
cursor: pointer;
position: absolute;
float: right;
top: 50%;
width: auto;
color: #383736;
font-weight: bold;
font-size: 20px;
user-select: none;
right: 75px;
transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-webkit-transition: 0.2s ease-in;
}
#next:before{
content:"Next";
position:absolute;
color:#383736;
left: 50%; // <--- here
opacity: 0;
-webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
padding-right: 5px;
}
#next:hover:before{
left:100%; // <--- here
transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
-ms-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-webkit-transition: 0.6s ease-in;
opacity:1;
}
I created a link that uses css pseudo classes. As seen in css (:before). Everything is fine in an Andriod device but in iPhone it's working on the second click Why...? if there is any solution please help me.
.link{float:left;}
.link a {
color: #000;
font-size: 15px;
font-weight: 400;
padding: 10px;
display: inline-block;
border: 1px solid #b6fe54;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
position: relative;
}
.link a:before {
position: absolute;
content: "";
width: 0px;
background: #b6fe54;
left: 0px;
top: 0px;
height: 100%;
z-index: -1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.link a:hover:before {
width: 100%;
}
<div class="link">Learn More</div>
Add the following
<script>
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(!iOS)
document.write('\x3Cstyle>.link a:hover:before {width: 100%;}\x3C/style>');
</script>
I am trying to get it so that when you hover over the box the '^' will animate upwards. Currently it gets to the right position on the over state but it does not apply the css transistion.
jsFiddle: http://jsfiddle.net/9f9fyaj2/
HTML:
<a href="#">
<div class="scrollToTop">
<i>^</i>
</div>
</a>
CSS:
body{
background: #7A7A7A;
}
.scrollToTop{
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .02s ease-out;
-moz-transition: top .02s ease-out;
-ms-transition: top .02s ease-out;
-o-transition: top .02s ease-out;
transition: top .02s ease-out;
}
.scrollToTop:hover i{
top:-20px;
}
.scrollToTop:hover{
background: rgba(0,0,0,1);
}
your transition is working well and good.
Just increase the time given for the transition.
Like This:
.scrollToTop i{
position: absolute;
top: 0px;
-webkit-transition: top .5s ease-out;
-moz-transition: top .5s ease-out;
-ms-transition: top .5s ease-out;
-o-transition: top .5s ease-out;
transition: top .5s ease-out;
}
would you see guys. my each image bottom have one caption bar with title. but that not same height for all box. all i want it will same height in all box and if you rollover then you will see that box slideup that's fine. also it will resposive. i am still trying but can not figureout it. would you guess see where i mistake. i just want to make that perfect. even if you any other css or js like that with responsive support then post here please.
thanks
http://jsfiddle.net/BAVXH/
bellow is css for caption
.box {
float: left;
border: 1px solid #FFF;
margin: 2px;
position: relative;
overflow: hidden;
background-color: #F00;
}
.box img {
position:relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:96%;
}
.box:hover .caption {
-moz-transform: translateY(-89%);
-o-transform: translateY(-89%);
-webkit-transform: translateY(-89%);
opacity: 1;
transform: translateY(-89%);
}
You could use something like this with jQuery and calculate the top for each caption.
for(i=0;i<8;i++){
var h = $('.col-'+i).height();
$('.col-'+i).find(".caption").css("top",h-25 + "px");
}
Hope this gives you an idea.
put height in px not in % like
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:100px;
}