I'm trying to use an opacity transition and it seems to work in all browsers except IE. IE 10 is supposed to support transitions, and it does... sometimes. I can't figure out why my code won't work. The first-letter code does not work in IE either. Is this not supported or am I doing something wrong?
<style type="text/css">
#piccode {
opacity:0;
-moz-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-duration: 1s;
-ms-transition-duration:1s;
-o-transition-duration: 1s;
}
#piccode:hover {
opacity: 1;
}
#postbody p:first-letter {
letter-spacing:1px;
line-height:0.5;
font-size: 25px;
font-family: 'Lovers Quarrel', cursive;
}
#postbody b {
color: #8b5a3c;
}
</style>
I don't know if it makes a difference, but if I delete the transitions, hovering continues to do nothing. I think my hover might be the problem... I'm sorry if I sound dumb here. I'm entirely self-taught!
For the transition, you forgot to specify which property to animate (for simplicity I used the shorthand property here):
#piccode {
opacity:0;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
And for first-letter the syntax with two colons :: is recommended (Older browser version should support the single colon syntax as well):
#postbody p::first-letter { /* ... */ }
Related
CSS transition property not functioning as expected
I am trying to add different transitions for the different properties, but the transition seems to not be working, as I expected.
Here is my CSS code
* {
transition: all .5s ease-in-out;
transition: opacity 80ms linear;
transition: background .2s ease-out;
}
I am probably doing something really obvious wrong, but if you can help, I do appreciate it. Thanks in advance!
Declaring the same CSS property multiple times will result in previous declarations being overwritten, and only the last being kept. (Assuming they have identical specificity).
You can comma-separate transitions like so:
transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;
Demonstration:
* {
transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;
}
div {
padding: 100px;
background-color: red;
color: white;
opacity: 0.4;
}
div:hover {
font-size: 20px;
opacity: 1;
background-color: blue;
}
<div>hover this</div>
I am studying Css recently in w3schools and I can't completely figure out how does this example work.
I don't konw what's the difference or usage of the following 3 transition codes in this example
.button:after {
transition-duration: 0.4s;
}
.button:after {
transition: all 0.8s;
}
.button:active:after {
transition: 0s
}
It would be greatful if someone can help me out of this.
better learn from developer.mozilla
transition: <property> <duration> <timing-function> <delay>;
in your case
.button:after {
transition-duration: 0.4s;
}
here you will need to add
transition-property: font-size;
transition-duration: 0.4s;
transition-delay: 2s;/*if you want a delay*/
all means apply to all properties of the element
.button:after {
transition: all 0.8s;
}
.button:active:after {
transition: 0s
}
This makes the white box visible on click within 0 seconds.
.button:after {
transition: all 0.8s;
}
This makes the white box invisible after 0.8 seconds.
.button:after {
transition-duration: 0.4s;
}
This doesn't serve any real purpose in your given example, but could be used in combination with (for example) a :hover effect.
I've just noticed that some CSS3 transitions have stopped working in Chrome (was working when I checked a few weeks ago) - seems fine in Safari.
I've definitely used this code before but maybe i'm overlooking something this time around?
The aim is just to have a smooth transition on hover:
Demo
HTML
<div></div>
CSS
div{
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div:hover{
right:-10px;
position:relative;
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
Thanks for any advice
right doesn't work on static positioned element, you need to use position: relative; on load as well as you need to define right and set it to 0 or whatever you like.
Demo
div{
/* All the properties you have declared will go here plus === */
right:0; /* Add this */
position:relative; /* Add this */
}
Using position: relative; on load will help you transit your element on mouse out as well as on mouse over, so if you are setting position: relative; on :hover then your element will fail to transit on mouse out.
Also, I've noticed that you are not using any standard property for transition so make sure you use them.
How to make jquery mobile collapsible content appear with animation using css transition?
.ui-collapsible {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
Not working.
jQuery Mobile's collapsible elements are shown and hidden by toggling display: none on the div of the collapsible content. As far as I know, all major browsers disable CSS transitions when the display property is changed.
An alternative would be overriding the default CSS of jQuery Mobile to always use display: block for the collapsible content div, and then transition on the height or opacity property (depending on whether or not the content needs to be "removed" from the layout).
I've created this jsFiddle, to demonstrate the transition using the opacity property. It is really just a matter of using the following CSS rules:
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
Transition using the height property is a little trickier as the content div has no set height. This fiddle does the trick (also see CSS below), but it requires setting a height on the content div. You can change the height to auto, but then the slide down effect doesn't look quite right in my opinion. Perhaps someone else knows a better method.
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 2em; /* or auto */
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
opacity: 1;
}
.ui-collapsible-content-collapsed {
display: block;
opacity: 0
}
I think you have to Creating custom CSS-based transitions:-
Refer This
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>