I currently have the following CSS, it works in Google Chrome (Webkit), but not in any other browser.
Whats the best way to make this compatible with everything?
As you can see it is using webkit, but I'm not sure what the moz equivalents are.
Many thanks
.card{
margin-top: -50px;
}
.card {
width: 286px; height: 224px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.container:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.megatron {
float: left; top: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
.megatron .front {
}
.megatron .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.megatron .back h2 {
background: url(megatron-title.png); text-indent: -9999px;
}
.megatron img {
float: right;
}
Your basic cross browser CSS3 transition declaration:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
Here is one of my favorite tools to help speed up the process: http://css3generator.com/
Maybe you need:
-webkit-... // For Webkit browser(Chrome, Safari...)
-moz-... // For Mozilla browser
-o-... // For Opera browser
-ms-... // For Microsoft browser
none... // For all browser(Newest version)
Example:
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
Hope that is useful.
Related
$('.click').click(function(){
$('.image').toggleClass("image1");
});
.click{
position:absolute;
top:1%;
left:45%;
cursor:pointer;
}
.image{
cursor: pointer;
position: absolute;
top:25%;
left:0%;
height:60%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
.image1{
cursor: pointer;
position: absolute;
top:25%;
left:50%;
height:50%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="click">Click here to animate</div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">
I've noticed that if there's an image that goes under a transition, it would pixelate during the process until the animation is completed.
how can this be avoided?
You can use image-rendering: pixelated; to image. Hope you are ok with it. Thanks.
$('.click').click(function(){
$('.image').toggleClass("image1");
});
.click{
position:absolute;
top:1%;
left:45%;
cursor:pointer;
}
.image{
cursor: pointer;
position: absolute;
top:25%;
left:0%;
height:60%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
image-rendering: pixelated;
}
.image1{
cursor: pointer;
position: absolute;
top:25%;
left:50%;
height:50%;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="click">Click here to animate</div>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">
is lot of time I'm trying to have 3 columns button in bootstrap that change image in Hover.
I have tryed everything but nothing work, all the solution I've found broken the lines of Bootstrap or cause me lot of problem.
Can someone help me to do this? http://s3.postimg.org/j1yibn3pv/Schermata_2015_08_04_alle_11_35_20.png
Please, I'm desperate!
<div class="container">
<div id="box-servizi" class="section-shadow">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" id="promozioni">
<a href="#" title="Scopri tutte le nostre Promozioni">
<img class="section-shadow img-responsive normal" src="img/box-servizi/promozioni.jpg" alt="Immagine Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
<img class="img-responsive hover" src="img/box-servizi/promozioni-h.jpg" alt="Immagine Mouse Hover Promozioni Lodigiani Concessionaria" title="Scopri tutte le nostre Promozioni!" />
</a>
</div><!-- /promozioni -->
</div><!-- /box-servizi -->
</div><!-- /container -->
<!-- /BOX SERVIZI -->
#box-servizi {
background: #ffffff;
margin: 50px 0px;
padding-bottom: 50px;
padding-top: 20px;
overflow: hidden;
}
#box-servizi>div {
margin-top: 25px;
height: 100px;
position: relative;
padding-right: 50px;
}
#box-servizi>div>a>img{
display: block;
position: absolute;
/* transitions */
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#box-servizi>div>a>img.normal{
filter: alpha(opacity=100); /* IE stuff */
opacity: 1;
z-index: 2;
}
#box-servizi>div>a>img.hover{
filter: alpha(opacity=0); /* IE stuff */
opacity: 0;
z-index: 1;
}
/* hover */
#box-servizi>div>a:hover>img.normal{
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}
#box-servizi>div>a:hover>img.hover{
filter: alpha(opacity=100);
opacity: 1;
z-index: 2;
}
My solution:
/* ==========================================================================
SERVIZI
========================================================================== */
#servizi-bottom {
margin-top: 50px;
margin-bottom: 40px;
}
#servizi-bottom>.container>a>div {
padding: 2.205% 0%;
}
#servizi-bottom h3 {
text-align: center;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 0.1em;
font-style: italic;
}
.servizi-button {
border: 10px solid rgba(0, 0, 0, 0);
}
/* Promozioni
=================================== */
#box-promozioni {
background: transparent url("../img/box-servizi/promozioni.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni {
background-image: url("../img/box-servizi/promozioni-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-promozioni h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Servizi
=================================== */
#box-servizi {
background: transparent url("../img/box-servizi/servizi.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi {
background-image: url("../img/box-servizi/servizi-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-servizi h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Test Drive
=================================== */
#box-testdrive {
background: transparent url("../img/box-servizi/testdrive.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive {
background-image: url("../img/box-servizi/testdrive-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-testdrive h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Contatti
=================================== */
#box-contatti {
background: transparent url("../img/box-servizi/contatti.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti {
background-image: url("../img/box-servizi/contatti-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-contatti h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Tagliando
=================================== */
#box-tagliando {
background: transparent url("../img/box-servizi/tagliando.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando {
background-image: url("../img/box-servizi/tagliando-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-tagliando h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
/* Officina
=================================== */
#box-officina {
background: transparent url("../img/box-servizi/officina.jpg") no-repeat;
background-size:cover;
text-shadow: 1px 1px 10px black;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina {
background-image: url("../img/box-servizi/officina-hover.jpg");
text-shadow: 1px 1px 10px white;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover #box-officina h3 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
<!-- !BOX SERVIZI -->
<div class="row" id="servizi-bottom">
<div class="container">
<a href="#" title="Scopri tutte le nostre Promozioni">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-promozioni">
<h3>promozioni</h3>
</div>
</a><!-- /box-promozioni -->
<a href="#" title="Tutto ciò che offriamo">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-servizi">
<h3>servizi</h3>
</div>
</a><!-- /box-servizi -->
<a href="#" title="Tutto sui nostri Test Drive">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-testdrive">
<h3>test drive</h3>
</div>
</a><!-- /box-testdrive -->
<a href="#" title="Scopri come Contattarci!">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-contatti">
<h3>contatti</h3>
</div>
</a><!-- /box-contatti -->
<a href="#" title="Tagliando">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-tagliando">
<h3>tagliando</h3>
</div>
</a><!-- /box-tagliando -->
<a href="#" title="Le nostre Officine">
<div class="servizi-button col-xs-12 col-sm-6 col-md-4 col-lg-4" id="box-officina">
<h3>officina</h3>
</div>
</a><!-- /box-officina -->
</div><!-- /container -->
</div><!-- /row -->
<!-- /BOX SERVIZI -->
What do you think?
I have following code running fine on modern browsers, except IE11 :
A simple pseudo-element animated to rotate indefinitely.
#keyframes spin{
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin{
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin-container{
position: relative;
width: 400px;
height: 300px;
margin: 2em auto;
box-sizing: border-box;
}
.spin-container::after{
content: "";
position: absolute;
display: block;
opacity: 1;
border-color: rgba(0, 0, 0, 0.2) green green rgba(0, 0, 0, 0.2);
border-radius: 100%;
border-style: solid;
border-width: 10px;
width: 100px;
height: 100px;
bottom: 50px;
right: calc(50% - 50px);
border-radius: 100%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
<div class="spin-container"></div>
I've been looking for a reason for weeks now, and I cannot determinate a property that can cause this.
I first suspected a transform-origin to not be the center of my pseudo-element spinner, but it appears that default value is 50% 50% 0 for every browser.
Then I looked into z-axis modification, or crazy inheritance, but I definitely found nothing.
Does anyone know why this flickers on IE11, and not on other browsers ?
IE11 has some issues related to hardware acceleration and CSS animation:
IE 11 Leaving Artifacts and not redrawing screen
CSS Transition Property not working for SVG Elements
Microsoft is only fixing security related issues in IE11, so this will most likely remain unfixed.
I am trying to make images flip using CSS3.
Here is an example using JS but I need a straight CSS solution
You can try this:
img{
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
transition: all 1s;
}
img:hover{
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(270deg); /* IE 9 */
transform: rotate(270deg);
}
You edited your question, from what I understand, then this is the best solution:
Example: http://embed.plnkr.co/ZaPfSa4Od9lfC9idwDGW/preview
img{
-webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
transition: all .5s;
}
img:hover{
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: 'FlipH';
}
a more complete vendor prefixed version:
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
-ms-transition: -ms-transform 1s;
transition: transform 1s;
http://jsfiddle.net/egEq2/
.badge {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
width: 100%;
height: 100%;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
.product-action {
display: inline-block;
}
.product-action:hover .back {
-webkit-transform: rotateY(0deg);
}
.product-action:hover .front {
-webkit-transform: rotateY(-180deg);
}
... works, but flips too slow, can I change the speed?
Also, can I add width somehow so the flip looks like a board and not a thin paper? :)
Thanks!
You specified the speed already:
-webkit-transition: -webkit-transform 1s ease-in;
^^
Change it to something like 0.3s: http://jsfiddle.net/egEq2/1/