Firefox CSS Placeholder Issue - html

I am trying to animate the my input placeholders. As it is, it works in Chrome, but I'm having trouble with the firefox implementation.
Here is my SCSS:
input[placeholder], :-moz-placeholder, ::-moz-placeholder {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&[style*=hidden] {
color: $gold;
font-size: 12px;
-moz-transform: translate3d(0, -25px, 0);
transform: translate3d(0, -25px, 0);
opacity: 1;
visibility: visible !important;
}
}

Related

Different transition for on/off class but same property

I have a div that translates itself in with a simple transition:
div{
transform: translate3d(0, -100%, 0);
transition: all .5s;
}
div.active{
transform: translate3d(0, 0, 0);
}
Then, I toggle the class with JS and it works perfectly. This does the following:
On --> Slide div down
Off --> Slide div up
What I want to do is:
On --> Slide div down
Off --> Slide div down again
Is there a way to achieve this?
EDIT: Here's a demo of what it does: https://jsfiddle.net/bwzy89oq/ (click anywhere)

This does what you need, sort of, but it starts off playing the animation. I'm working on how to logic that out:
div {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
transform: translate3d(0, 100%, 0);
background: black;
transition: all .5s ease-in-out;
animation: slider2 .5s forwards;
}
div.active {
animation: slider .5s forwards;
/*transform: translate3d(0, 0, 0);*/
}
#keyframes slider {
from {
transform: translate3d(0, -100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
#keyframes slider2 {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 100%, 0);
}
}

ihover is not working with bootstrap

I am trying to work out ihover with bootstrap but its not working. I searched for this problem and tried the solution provided but still its not working. The answer is not satisfactory.This is the code that I am trying to implement. I took it from this link. I added css from this link. Please tell me what am I missing?
<div class="col-md-6">
<div class="ih-item square effect7">
<a href="#">
<div class="img"><img src="homepage-pics/electrician.jpg"></div>
<div class="info">
<h3>Electrician</h3>
<p>Need an electrician?click here</p>
</div>
</a>
</div>
</div>

The issue is with the anchor in your .info p tag. if you remove the anchor from this <p>, it works.
.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.ih-item a {
color: #333
}
.ih-item a:hover {
text-decoration: none
}
.ih-item img {
width: 100%;
height: 100%
}
.ih-item.circle {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%
}
.ih-item.circle .img {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%
}
.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item.circle .img img {
border-radius: 50%
}
.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.ih-item.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)
}
.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.ih-item.circle.effect7 .img {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
transition: all 0.35s ease-out
}
.ih-item.circle.effect7.colored .info {
background: #1a4a72
}
.ih-item.circle.effect7 .info {
background: #333;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transition: all 0.35s ease 0.2s;
-moz-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s
}
.ih-item.circle.effect7 .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3)
}
.ih-item.circle.effect7 .info p {
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5)
}
.ih-item.circle.effect7 a:hover .img {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5)
}
.ih-item.circle.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.ih-item.circle.effect7.left_to_right .info {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%)
}
.ih-item.circle.effect7.left_to_right a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.ih-item.circle.effect7.right_to_left .info {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%)
}
.ih-item.circle.effect7.right_to_left a:hover .info {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.ih-item.circle.effect7.top_to_bottom .info {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%)
}
.ih-item.circle.effect7.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.ih-item.circle.effect7.bottom_to_top .info {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%)
}
.ih-item.circle.effect7.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0)
}
.ih-item.square.effect7 {
overflow: hidden
}
.ih-item.square.effect7.colored .info {
background: #1a4a72;
background: rgba(26, 74, 114, 0.6)
}
.ih-item.square.effect7.colored .info h3 {
background: rgba(12, 34, 52, 0.6)
}
.ih-item.square.effect7 .img {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.ih-item.square.effect7 .info {
background: #333;
background: rgba(0, 0, 0, 0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out
}
.ih-item.square.effect7 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
background: #111;
margin: 30px 0 0 0;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
-o-transform: scale(4);
transform: scale(4);
-webkit-transition: all 0.35s 0.1s ease-in-out;
-moz-transition: all 0.35s 0.1s ease-in-out;
transition: all 0.35s 0.1s ease-in-out
}
.ih-item.square.effect7 .info p {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 20px 20px 20px;
text-align: center;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.35s 0.3s linear;
-moz-transition: all 0.35s 0.3s linear;
transition: all 0.35s 0.3s linear
}
.ih-item.square.effect7 a:hover .img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2)
}
.ih-item.square.effect7 a:hover .info {
visibility: visible;
opacity: 1
}
.ih-item.square.effect7 a:hover .info h3,
.ih-item.square.effect7 a:hover .info p {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="ih-item square colored effect7">
<a href="#">
<div class="img">
<img src="http://gudh.github.io/ihover/dist/images/assets/rect/4.jpg" alt="img">
</div>
<div class="info">
<h3>Electrician</h3>
<p>Need an electrician?<!--click here-->
</p>
</div>
</a>
</div>
</div>
</div>

How can I change the order of transition?

The transition is not suppose to show on page load. I need to change the direction so that when a user scrolls down they need to click the button in order to see the content that resides within the black box. In other words, the black box is not suppose to show until a user tells it to.
The button is the three gray dots towards the middle.
DEMO
<style> body, .container, .content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #fff;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover, .menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: absolute;
background: #fff;
overflow-y: visible;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: none;
content:'';
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Menu Button 1 */
.menu-button {
position: absolute;
z-index: 1000;
margin: 1em;
padding: 0;
width: 10px;
height: 50px;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
opacity: 1;
top: 510px;
left: 855px;
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.2em;
bottom: 0.4em;
left: -1px;
background: linear-gradient(#929292 20%, transparent 20%, transparent 40%, #929292 40%, #929292 58%, transparent 0%, transparent 80%, #929292 80%);
content:'';
}
.menu-button:hover {
opacity: 1;
}
/* Close Button */
.close-button {
width: 50px;
height: 50px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
opacity: 0;
}
.close-button::before, .close-button::after {
content:'';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Comments */
.menu-wrap {
position: absolute;
z-index: 1000;
width: 429.0500011444092px;
height: 600.875px;
right: 0;
background: #0C0C0C;
top: 6px;
padding: 0;
font-size: 1.15em;
-webkit-transform: translate3d(500px, 0, 0);
transform: translate3d(500px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0, 500px, 0);
transform: translate3d(0, 500px, 0);
}
.icon-list, .icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0, 1500px, 0);
transform: translate3d(0, 1500px, 0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0, 2500px, 0);
transform: translate3d(0, 2500px, 0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list, .show-menu .icon-list a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>

My left menu and submenu covers my entire page on low bandwidth

I have a left menu, and when I hover to a menu item a submenu open and when clicking on the submenu, the background covers my entire page if the internet is slow, and then goes back as it was.
CSS
#media (min-width: 478px) {
nav.main-menu {
position: absolute;
top: 72px;
left: 0;
z-index: 1010;
overflow: hidden;
width: 60px;
height: 100%;
background: #333333;
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transition: width 0.05s linear;
-o-transition: width 0.05s linear;
-webkit-transition: width 0.05s linear;
transition: width 0.05s linear;
transform: translateZ(0) scale(1, 1);
}
nav.main-menu > ul {
margin: 7px 0;
}
nav.main-menu li {
position: relative;
display: block;
width: 250px;
}
}
How to fix this?

Deleted this part and it worked fine:
-moz-transform: translateZ(0) scale(1, 1);
-ms-transform: translateZ(0) scale(1, 1);
-o-transform: translateZ(0) scale(1, 1);
-webkit-transform: translateZ(0) scale(1, 1);
-moz-transition: width 0.05s linear;
-o-transition: width 0.05s linear;
-webkit-transition: width 0.05s linear;
transition: width 0.05s linear;
transform: translateZ(0) scale(1, 1);

Performance issues with translate3d transform transition?

the two css classes are,
.slideOut {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.3s ease;
-webkit-backface-visibility: hidden;
-webkit-transition: transform 0.3s ease;
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
}
.slideIn {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transition: all 0.3s ease;
}
I have not seen any flickering in chrome browser and not even in iphone but when I run the application on some android devices like Samsung s3, the view flickers when the height of the view exceeds the height of the devices.
What can be done to remove this issue.
Thanks for any help.