I am trying to override the default animation for UIBModal. However this is not working. The default animation runs only.
.modal.modal-slide-in-right .modal-dialog {
opacity: 0;
-webkit-transform: translate(20%, 0%);
-ms-transform: translate(20%, 0%);
-o-transform: translate(20%, 0%);
transform: translate(20%, 0%);
-webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
-o-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
}
.modal.modal-slide-in-right.in .modal-dialog {
opacity: 1;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
http://plnkr.co/edit/YQ0eHIWrHlm90oW5oS4r?p=preview
You forget to insert your extra.css stylesheet into the index.html
<link rel="stylesheet" href="extra.css">
Here is a working plunk
Related
I would like to ask about a problem I have.
I created flip boxes on a wordpress page and it works like a charm on mozilla, chrome.
I also tested on a mac and it flips normally but on ipad and iphone 8 it won't.
It won't flipp on the back div and shows letters from the front div reversed.
Can you please help me?
.flip-container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateY(180deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.flip-container, .front, .back {
width: 100%;
height: auto;
min-height: 225px;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotate(0deg);
background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
background-size: cover;
background-repeat: no-repeat;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-o-transform: rotate(180deg);
background: hsla(0, 0%, 0%, 0.5);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.page-id-988 .box,.page-id-1015 .box {
float: left;
display: inline;
margin: 2% 1%;
width: 23%;
height: auto;
perspective: 1000px;
-webkit-perspective: 1000px;
}
<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div style=" background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/diagnwstika-kentra.jpg);background-size: cover;
background-repeat: no-repeat;" class="front"><!-- front content --><p class="title"> test 1</p>
</div>
<div class="back">
<!-- back content --><p class="title">test 1 </p>
<ul><li>CA 19-9</li><li>CEA </li><li>PSA</li><li>FREE PSA</li></ul><p class="price">25,00 €</p>
</div>
</div>
</div></div>
<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/analysi-aimatos-gia-aimolipsia-b.jpg);background-size: cover;
background-repeat: no-repeat;" ><!-- front content --><p class="title">test 2 </p>
</div>
<div class="back">
<!-- back content --><p class="title">test 2 </p>
<ul><li>CA 15-3</li><li>CA 19-9</li><li>Ca-125</li><li>CEA</li></ul><p class="price">45,00 €</p>
</div>
</div>
</div></div>
I managed to make it show normally but when I click on the back side it doesn't rotate on the front. Can anyone please help me?
.flip-container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateY(180deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.flip-container, .front, .back {
width: 100%;
height: auto;
min-height: 225px;
perspective: 1000px;
-webkit-perspective: 1000px;
width: 100%;
height: auto;
min-height: 225px;
transform: rotateY(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotateY(0deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotate(0deg);
background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
background-size: cover;
background-repeat: no-repeat;
perspective: 1000px;
-webkit-perspective: 1000px;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-o-transform: rotate(180deg);
background: hsla(0, 0%, 0%, 0.5);
perspective: 1000px;
-webkit-perspective: 1000px;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
I use this CSS code for create a hover for images in bootstrap but this hover is not work on IOS safari and chrome browser . it is working on android . i want to know where am i wrong and what should i do ?
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(130,139,164,0.5);
-webkit-transition:all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
}
.hovereffect h2 {
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(41,35,92,0.8);
-webkit-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform:translateY(-100px);
-webkit-transition:all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovertext {
color:#fff;
text-align:center;
position:relative;
font-size:17px;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform:scale(1.2);
border-radius: 15px;
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
cursor: pointer;
visibility: visible;
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translateY(0);
-webkit-transform:translateY(0);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform:translateY(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
-moz-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay:.2s;
}
#rounded {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.rounded {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
You need to use the :focus selector for iOS. Just add it to your classes the same way you would the :hover selector.
I have been struggling with this for quite a bit now.
.intro #intro-n,
.intro #intro-o,
.intro #intro-a2 {
stroke-dasharray: 400;
stroke-dashoffset: 400; }
.intro #intro-n {
/*-webkit-animation: intro-letters 0.9s linear;*/
-webkit-animation-name: intro-letters;
-webkit-animation-duration: 0.9s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-letters 0.9s linear;
animation: intro-letters 0.9s linear;
animation-name: intro-letters;
animation-duration: 0.9s;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s; }
#-webkit-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#-moz-keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
#keyframes intro-letters {
0% {
}
100% {
stroke-dashoffset: 0; } }
http://codepen.io/anon/pen/ORkZwG
This code perfectly works on Windows(except IE) and Android devices, but when i try to launch it in iOS safari or even chrome SVG animations are blank.
Edit:
Yes, it works in iOS desktop Google Chrome version, but it doesn't work on iOS Tablet Chrome nor Safari
After spending a fair amount of time on this issue, I finally cracked it down, it seems that the issue was in this bit of code:
.intro svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 250px;
/*-webkit-animation: intro-hide-element 0s linear;*/
-webkit-animation-name: intro-hide-element;
-webkit-animation-duration: 0s;
-webkit-animation-timing-function: linear;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 5.1s;
-moz-animation-delay: 5.1s;
animation-delay: 5.1s; }
Particularly here:
-webkit-animation-duration: 0s;
-moz-animation: intro-hide-element 0s linear;
animation: intro-hide-element 0s linear;
Where after changing it to:
-webkit-animation-duration: 0.001s;
-moz-animation: intro-hide-element 0.001s linear;
animation: intro-hide-element 0.001s linear;
The animations in safari tablet browser appeared, I'm not entirely sure why it works in chrome and not safari, but that was what did the trick for me, hopefully someone can explain a bit more in detail why this is happening but in the mean time hope it helps someone.
I've made a simple animation I want to use as a pre-loader for my website using CSS animations.
It seems to work beautifully on everything except iOS devices, where the separate elements seem to fire out of sync and end up just doing their own thing.
You can see the fiddle and try it own on your phone here
UPDATE:
Weird – so the JSfiddle seems to work fine on iOS but when the same code comes into practice live on my site it seems to mess things up? you can see it here
Makes me think its actually something to do with my pre-loading script?
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut(300); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
CSS
.square {
background: #61CAFF;
width: 150px;
height: 150px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.circle {
background: #9DFDC3;
width: 150px;
height: 150px;
border-radius: 50%;
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 140px 80px;
border-color: transparent transparent #F896D5 transparent;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
How do I get this code to work on iOS?
My iPad won't show the translate property.
I have read about using -webkit-backface-visibility: hidden; and -webkit-transform: translate3d, but its not working.
.logo-box {
display: inline-block;
vertical-align:middle;
width:115px;
margin: 0px 10px 0px 10px;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.logo-box:hover {
transform: translate(0,-20px);
-webkit-transform: translate(0,-20px); /** Safari & Chrome **/
-o-transform: translate(0,-20px); /** Opera **/
-moz-transform: translate(0,-20px); /** Firefox **/
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
In some cases, adding perspective helped me out. You may want to try adding it and see it if works. You can read about it here:
http://www.w3schools.com/cssref/css3_pr_perspective.asp