I use CSS for div tag in html. This is show below.
.sqmenu{ width:120px;
display:inline-block;
height:80px;
border-radius:10px;
margin:15px 0 0px 45px;
box-shadow:#333 2px 2px 20px;
-webkit-transform:scale(1);
transform:scale(1);
color:#093;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;}
.sqmenu:hover{-webkit-transform:scale(1.2);
transform:scale(1.2);
color:#F63;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;
}
This two class use for this line:
<div class="nev_menu">
<div class="sqmenu" style="background-color:#aa68aa;">
<div style="text-align:center; margin-top:10px;"><img src="images/Activities60.png" class="linkimg" /></div>
<div style="text-align:center;font-family:Verdana, Geneva, sans-serif;
font-size:16px; margin-top:30px;text-decoration:none;">Our Delight</div>
</div>
</div>
This div is perfectly runnig in Chrome and FF & IE10 but Not running in IE8. Problem is hover and box-shadow effect not apply.
There are several css properties that are not supported in ie8, including the box-shadow. The hover property for ie only works if the link has an associated href. One option that I have used in the past to help with ie8 compatibility with newer css3, is PIE - http://css3pie.com/. It's fairly easy to implement and allows you to use the newer css3 properties like box-shadow.
CSS3 Transitions are not supported prior to IE10.
for ie9 u forget : -ms-
transform:scale(1.2);
-ms-transform:scale(1.2);
But ie9 don't support "transition". For ie older version u need to use filter for transform property. Look this link :
link
Related
I try to make some transition with hover animation. In opera and chrome it works ,but for Mozilla not. What I need to do!? My code is below
HTML
<a href="">
<div class="teams back"></div>
</a>
CSS
.teams{
display: table-cell;
background-size: cover;
background-position:center;
width: 360px;
height: 370px;
transition:1s;-webkit-transition:1s;-moz-transition:opacity 1.0s;-o-transition:1s;
}
#teams .back{background-image: url("link");}
#teams .back:hover{background-image:url("link");}
I made the JSFiddle for this
The syntax for the first transition statement is invalid. See: transition
You'll have to change
transition: 1s;
-pre-transition: 1s;
to
transition: <property> 1s;
-pre-transition: <property> 1s;
Since, you've got -moz-transition:opacity 1.0s;, the <property> in your case would be opacity.
Your transition property syntax should be like this:
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
To know how transition works read css transition
i have issue in CSS it can't move smoothly in menu bar, the menu in this link can anyone help me thanks .
here is the link jsfiddle.
i try this but nothing work :
.div-move{
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
You can't transition to width:auto, but by using max-width is automatically with use the size of your text. Just make sure the :hover width is longer then the text you use so it will all appear. Also I suggest using a transition on both hover and regular classes so you also have a transition when you mouse off the menu. Try changing these classes:
.text-header-move{
max-width: 0px;
float: right;
overflow: hidden;
-webkit-transition: max-width 1s ease-in-out;
-moz-transition: max-width 1s ease-in-out;
-o-transition: max-width 1s ease-in-out;
transition: max-width 1s ease-in-out;
}
.notification-bar:hover .text-header-move{
max-width:400px;
-webkit-transition: max-width 1s ease-in-out;
-moz-transition: max-width 1s ease-in-out;
-o-transition: max-width 1s ease-in-out;
transition: max-width 1s ease-in-out;
}
You want to transform to an "auto" value that was one of the problems.
.notification-bar:hover .text-header-move{
width:auto;
}
Take a look at this fiddle:
http://jsfiddle.net/herrfischerhamburg/jok48kpz/2/
I updated the fiddle to work with a "max-width", i think this is the better solution for you than the fixed width.
I've been writing this website for a few days now and have gotten into trouble with my logo position. I can't seem to move it not matter how much I try. Can anyone suggest how I can do this? PS. (I'm still learning css.)
HTML:
<div class="logofx">
<img src="images\logo.png">
</div>
CSS:
.logofx img {
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.logofx img:hover {
-webkit-filter: hue-rotate(333deg);
}
You need position:relative, position:absolute or position:fixed (depending on the specific desired effect*).
By default, elements have position:static and statically-positioned elements are unaffected by left/top/right/bottom adjustments.
*Effects:
position:relative moves the element by the amount specified, but other elements behave like it hasn't moved. If you want other elements to move too, consider using margin properties instead.
position:absolute moves the element to be placed relative to the nearest position:relative container (or the whole document, if there is none).
position:fixed fixes the element in the browser window, using the left/top as coordinates.
Set position: fixed
.logofx img {
position: fixed;
top:300px;
left:50px;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
what about margins instead?
.logofx img {
margin:300px 0 0 50px;
display:block;
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
HTMl:
<div class="logo"><div class="logofx">
<img src="images\logo.png">
</div>
</div>
CSS:
.logo{position:relative;}
.logofx{position:absolute; top:10px; left:10px;}
Try this code this will help you .Kindly put the top and left at correct pixel or move where you want using top and left property.
I have the following code of CSS3 for regular browsers and those with -webkit- suport.
But, what value should I really set for the following property:
-webkit-transition-property: ????;
Because a value like box-shadow is -webkit-box-shadow for -webkit- related usages, and then, for the above property, should I use box-shadow or -webkit-box-shadow?
If you want to have a transition of a property which also uses vendor prefixes itself, you need to add them.
Example CSS:
.my-class {
-webkit-transition: -webkit-box-shadow 1s;
-moz-transition: -moz-box-shadow 1s;
-ms-transition: -ms-box-shadow 1s;
-o-transition: -o-box-shadow 1s;
transition: box-shadow 1s;
}
With unprefixed properties it works like this:
.other-class {
-webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
}
Browser support:
CSS3 transition
CSS3 box-shadow
You should use the corresponding vendor-prefixed property.
-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;
Check this example:
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
is the same as (using shorthand version):
div {
transition: width 1s linear 2s;
-webkit-transition: width 1s linear 2s; /* Safari */
}
Here http://caniuse.com/#feat=css-transitions you can find when you need prefixes for transitions. There is a nice example here http://jsfiddle.net/davidThomas/XEWhk/1/ from another similar question that helps a lot.
I've set a transition and a transform for an element. I'd like to have different durations on each of my transformations (scale, perspective, rotate). Any way to achieve that?
Transition:
transition:-webkit-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear; /** Chrome & Safari **/
Transform:
-webkit-transform: translate3d(50px, 114.82978723404256px, 0px) perspective(2000px) rotateX(40deg) scale(0.23297872340425532);
You can achieve it like following code. I've used it in my website and it works perfect.
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
Hope it helps!
Thanks