I'm trying to build a menu open and close transition in Vue, but added a class on a button click.
See:
button {
position: absolute;
top: 50px;
right: 0;
}
.logo {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 0s;
}
.menu {
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 1s;
}
li {
opacity: 0;
transition: opacity 1s;
transition-delay: 0.8s;
}
li.active {
opacity: 1;
}
/* Opened menu */
.menu-opened .logo {
transform: scale(2);
transition-delay: 1s;
}
.menu-opened .menu {
transform: translateX(0);
transition-delay: 0s;
}
.menu-opened li {
opacity: 1;
}
https://codepen.io/drewbaker/pen/zYGEJQJ
Opening menu: Logo scales up, then 1 second later, the menu slides down, then items fade in.
Closing menu: Items fade out, then menu slides up, then 1 second later, logo scales down.
For the life of me I can't get it to work as I'd expect. I think I don't really understand how classes effect CSS transitions.
I understand that you want to
Logo scales up
1 second later menu slides down
items fade in (may be 0.5s or other.It is depend on you)
And then
items fade out (may be 0.5s or other.It is depend on you)
menu slides up
1 second later menu scales down
If it is correct desires, you can change following css transitions.
.logo {
transition-delay: 1.5s;
}
.menu {
transition-delay: 0.5s;
}
.menu-opened .logo {
transition-delay: 0s;
}
.menu-opened .menu {
transition-delay: 1s;
}
/* Fade in and out menu items */
.menu li{
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
}
.menu-opened .menu li{
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
}
When you click toggle menu-opened will add immediately.So, you should remove transition-delay in .menu-opened .logo and add transition-delay in .menu-opened .menu first.You just need to change this way.
new Vue({
el: '#container',
data: {
menuOpened: false,
},
computed: {
classes() {
return [
"main",
{"menu-opened": this.menuOpened }
]
},
menuClasses() {
return [
"menu"
]
}
}
});
button {
position: absolute;
top: 50px;
right: 0;
}
.logo {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 1s;
transition-delay: 1.5s;
}
.menu {
position: absolute;
top: 0;
left: 150px;
transform: translateY(-100%);
transition: transform 1s;
transition-delay: 0.5s;
}
/* Opened menu */
.menu-opened .logo {
transform: scale(2);
transition-delay: 0s;
}
.menu-opened .menu {
transform: translateX(0);
transition-delay: 1s;
}
.menu li{
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
}
.menu-opened .menu li{
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
}
<html>
<head>
</head>
<body>
<div id="container">
<main :class="classes">
<button #click="menuOpened = !menuOpened">Toggle</button>
<h1 class="logo">Logo</h1>
<div :class="menuClasses">
<ul>
<li>Menu item here</li>
<li>Menu item here</li>
<li class="active">Menu item here</li>
<ul>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>
</html>
It can be achieved using the transitions in the right place.
I have added your expectations in the following codepen.
https://codepen.io/ravinila-the-flexboxer/pen/LYVemGj
Here you go:
.logo {
transition-delay: 1.5s;
}
.menu {
transition-delay: 0.5s;
}
.menu-opened .logo {
transition-delay: 0s;
}
.menu-opened .menu {
transition-delay: 1s;
}
.menu li{
opacity: 0;
transition: opacity 1s;
transition-delay: 0s;
}
.menu-opened .menu li{
opacity: 1;
transition: opacity 1s;
transition-delay: 1.5s;
}
Related
I'm using keyframes so fade in the items on click, but I want them to then fade out when I click again. How do I do this with keyframes? Maybe this is something you can't actually do with keyframes?
codepen
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
.primary__nav {
display: none;
&.open {
display: block;
}
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
li {
opacity: 0;
-webkit-animation: fadeInRight 0.5s linear forwards;
animation: fadeInRight 0.5s linear forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
li:nth-of-type(3) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
li:nth-of-type(4) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
li:nth-of-type(5) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
function bunAnimate(x) {
$(".icon-wrap").toggleClass("open");
$(".primary__nav").toggleClass("open");
}
You can make the list fade out item by item on click by more-or-less reversing the process.
There is one slight problem though, it's not possible to do this entirely in CSS as animations will not set the display property, so we can't get a keyframes declaration to set display: none on the primary nav element when the fading out has all completed. We get round this by introducing another class, display, which we call through Javascript. This is done rather crudely with a setTimeout, it may be possible to be more sophisticated by listening for the end of an animation, but it basically comes to the same thing.
function bunAnimate(x) {
document.querySelector(".icon-wrap").classList.toggle("open");
if (!document.querySelector(".primary__nav").matches('.open')) {
document.querySelector(".primary__nav").classList.add("open");
document.querySelector(".primary__nav").classList.add('display'); //display immediately it's open
}
else {
document.querySelector(".primary__nav").classList.remove("open");
setTimeout(function () {
document.querySelector(".primary__nav").classList.remove("display");
},550);//unpleasant but animations don't allow setting of display
}
}
.primary__nav {
display: none;
}
.primary__nav.display{
display: block;
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
}
li {
animation-name: fadeOutLeft;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
li:nth-of-type(1) {
animation-delay: 0.55s;
}
li:nth-of-type(2) {
animation-delay: 0.5s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.4s;
}
li:nth-of-type(5) {
animation-delay: 0.35s;
}
.open li {
display: block;
opacity: 0;
animation-name: fadeInRight;
}
.open li:nth-of-type(1) {
animation-delay: 0.35s;
}
.open li:nth-of-type(2) {
animation-delay: 0.4s;
}
.open li:nth-of-type(3) {
animation-delay: 0.45s;
}
.open li:nth-of-type(4) {
animation-delay: 0.5s;
}
.open li:nth-of-type(5) {
animation-delay: 0.55s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOutLeft {
0% {
}
100% {
opacity: 0;
}
}
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Note: I used pure CSS as I'm not familiar with SCSS.
Hi I have a situation where I need to show a word with a transition after some time inside a paragraph
for example i have an:
<h2>Click here to find <span class="more">more</span> information </h2>
I need the text more to appear with a sort of "fade" while the left and side text moves a bit to the sides kind of like this effect:
example
What i've tought (and was working) was using another span tag with class spacer right before the .more
<h2>Click here to find <span class="spacer"></span><span class="more">more</span> information </h2>
This is absolutely positioned and using a transition from width 0 to width 70px
and was looking fine in every browser except safari, because the spacer is always visible
here is my css code:
h2.sides-styled { left:0; margin: 0 auto; opacity:0; overflow: hidden; padding: 4px 0; position: absolute; right: 0; width: 774px; z-index: 1000; }
And the spans:
span.more { color:red; font-style: italic; left:365px; opacity:0; position: absolute; transition: visibility 2s; transition-delay: 3.3s; visibility: hidden; }
span.more.visible { opacity: 1; visibility: visible; }
span.spacer{ width:0; background: blue; -webkit-transition: width 2s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; -ms-transition: width 0.3s; transition: width 0.3s; transition-delay: 3.1s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -o-transition-delay: 3.1s; -ms-transition-delay: 3.1s; }
Animation is triggered adding the class .visible in Javascript
I need to achieve this using only css
You can achieve the effect using CSS3 transitions:
function toggleVisible() {
var heading = document.getElementsByTagName('h2')[0];
heading.classList.toggle('visible');
}
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleVisible, false);
h2 {
font-size: 36px;
text-align: center;
}
h2 span {
display: inline-block;
}
h2 span:nth-of-type(1) {
transform: translateX(42px);
transition: transform 2s ease-in-out;
}
h2 span:nth-of-type(2) {
opacity: 0;
transition: opacity 2s ease-in-out 1s;
}
h2 span:nth-of-type(3) {
transform: translateX(-42px);
transition: transform 2s ease-in-out;
}
h2.visible span:nth-of-type(1) {
transform: translateX(0);
}
h2.visible span:nth-of-type(2) {
opacity: 1;
}
h2.visible span:nth-of-type(3) {
transform: translateX(0);
}
<h2><span>Click here to find</span> <span>more</span> <span>information</span></h2>
<button type="button">Toggle visible</button>
You need to use keyframes for that. I've made a quick test: http://jsbin.com/pubicabiku/1 . You'll need to adjust duration and position, but you can get the gist.
More info about keyframes: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Update:
For smooth animation, you can use percentages. from and to represent 0 and 100:
/* sleft */
#-webkit-keyframes sleft {
0% {left: 50px; }
60% {left: 0px;}
100% {left: 50px;} // initial state
}
To repeat animation X times:
animation-iterantion-count: X;
-webkit-animation-iterantion-count: X;
Edit: I posted the code, just in case:
CSS
#swap {
position:absolute;
color:chocolate;
-webkit-animation: swap 2s infinite;
animation: swap 2s infinite;
}
/* swap */
#-webkit-keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#keyframes swap {
from {left: 150px; opacity:0;}
to {left: 190px; opacity:1;}
}
#sleft {
position:absolute;
-webkit-animation: sleft 2.5s infinite;
animation: sleft 2.5s infinite;
}
/* sleft */
#-webkit-keyframes sleft {
from {left: 50px; }
to {left: 0px;}
}
#keyframes sleft {
from {left: 50px;}
to {left: 0px;}
}
#sright {
position:absolute;
-webkit-animation: sright 3s infinite;
animation: sright 3s infinite;
}
/* sright */
#-webkit-keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
#keyframes sright {
from {left: 200px; }
to {left: 270px;}
}
HTML
<p id="sentence">
<span id="sleft">We provide</span>
<span id="swap">code</span>
<span id="sright">for your business.</span>
</p>
I don't get this, it seems like a bug, but it's consistent through several browsers. So the bug must be in my own head.
Basically, I've got this block with an image and some text.
The heading inside this block is composed of several span elements with each character in them. I want to fade these in, with opacity 0 to 1 and move them about 30 pixels on hover, with a slight delay on each span. This is no problem. But for some reason, only opacity seems to work, not translate3d.
I've got a jsfiddle to describe it:
https://jsfiddle.net/w5Lgdgt9/5/
HTML:
<div class="tiles-wrapper">
<article class="tiles-block">
<a href="">
<img src="https://orig06.deviantart.net/91ee/f/2008/209/1/9/cat_stock_002_by_pc_stock.jpg">
<h3>
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>m</span>
<span></span>
<span>i</span>
<span>p</span>
<span>s</span>
</h3>
</a>
</article>
</div>
CSS:
.tiles-wrapper {
position: relative;
overflow: hidden;
}
.tiles-block {
width:100%;
}
img {
width: 100%;
transition: transform .9s ease;
transform: scale(1);
}
span {
position: relative;
transition: opacity .3s, transform .3s ease;
opacity: 0;
transform: translate3d(0,-30px,0);
color:#000;
font-weight: bold;
}
h3 {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
text-align: center;
z-index: 1;
transition: opacity .3s ease, transform .3s ease;
opacity: 0;
transform: translate3d(0,40px,0);
padding: 70px;
font-size: 24px;
}
a {
display:block;
margin: 0;
position: relative;
}
h3 span:nth-of-type(1) {
transition-delay: .2s;
}
h3 span:nth-of-type(2) {
transition-delay: .4s;
}
h3 span:nth-of-type(3) {
transition-delay: .6s;
}
h3 span:nth-of-type(4) {
transition-delay: .8s;
}
h3 span:nth-of-type(5) {
transition-delay: 1s;
}
h3 span:nth-of-type(6) {
transition-delay: 1.2s;
}
h3 span:nth-of-type(7) {
transition-delay: 1.4s;
}
h3 span:nth-of-type(8) {
transition-delay: 1.6s;
}
h3 span:nth-of-type(9) {
transition-delay: 1.8s;
}
h3 span:nth-of-type(9) {
transition-delay: 2s;
}
a:hover span{
opacity: 1;
transform: translate3d(0,0,0);
}
a:hover h3 {
opacity: 1; transform: translate3d(0,0,0);
}
a:hover img{ transform: scale(1.1); }
Sorry about the horrible CSS code, I usually use SASS and I couldn't get it to work on jsfiddle. Also, don't worry about the prefixes on the transition stuff, gulp takes care of that for me, so that's not the problem.
Found out, it's because the span elements hadn't been set to inline-block. As translate and translate3d only works on block elements. Stupid me
Use:
translate
instead of:
translate3d
Your fiddle updated with this minor change works just fine: https://jsfiddle.net/w5Lgdgt9/6/
I want to make the animation .logo to spin 360 degree ,its an image...any help please?
.logo {
top:35%;
left:70%;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 5000;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
}
#-webkit-keyframes spin {
0%{ -webkit-transform: rotate(0deg);}
100%{ -webkit-transform: rotate(360deg);}
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 black;
background: #bcab98;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav a:hover{
text-decoration: underline;
}
nav li:hover{
text-decoration: none;
}
nav .dropdown1:after {
content: ' ▶';
}
nav .dropdown1:hover:after{
content:'\25bc';
}
nav .dropdown2:after {
content: ' ▶';
}
nav .dropdown2:hover:after{
content:'\25bc';
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
.drop_down_menu_for_cafe:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
<nav>
<ul class="drop_down_menu_for_cafe">
<li><a class="dropdown1" href="#"> Coffee Menu </a>
<ul>
<li> Cappuccino coffee </li>
<li> Expresso coffee </li>
<li> Black coffee </li>
</ul>
</li>
<li><a class="dropdown2" href="#"> Tea </a>
<ul>
<li> Green tea </li>
<li> Black tea </li>
<li> Dark tea </li>
</ul>
</li>
<li><a class="about" href="#"> About </a></li>
<li><a class="contacts" href="#"> Contacts </a></li>
</ul>
</nav>
<img src="lattee.jpg" alt="latte_coffee" width="1180px" height="550px">
<span class="logo"><img class="logo" name="logo" src="coffee-logo.jpg" alt="latte_logo" width="200px" height="200px"></span>
The problem is that you have -webkit-animation-duration: 5000; instead of -webkit-animation-duration: 5000ms;:
... and you might also want to support other browsers
.logo {
top: 35%;
left: 70%;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: spin;
-moz-animation-duration: 5000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in;
-ms-animation-name: spin;
-ms-animation-duration: 5000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-in;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
nav ul {
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 0 black;
background: #bcab98;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav a:hover {
text-decoration: underline;
}
nav li:hover {
text-decoration: none;
}
nav .dropdown1:after {
content: ' ▶';
}
nav .dropdown1:hover:after {
content: '\25bc';
}
nav .dropdown2:after {
content: ' ▶';
}
nav .dropdown2:hover:after {
content: '\25bc';
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
.drop_down_menu_for_cafe:after,
.cf:before {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
<nav>
<ul class="drop_down_menu_for_cafe">
<li><a class="dropdown1" href="#"> Coffee Menu </a>
<ul>
<li> Cappuccino coffee
</li>
<li> Expresso coffee
</li>
<li> Black coffee
</li>
</ul>
</li>
<li><a class="dropdown2" href="#"> Tea </a>
<ul>
<li> Green tea
</li>
<li> Black tea
</li>
<li> Dark tea
</li>
</ul>
</li>
<li><a class="about" href="#"> About </a>
</li>
<li><a class="contacts" href="#"> Contacts </a>
</li>
</ul>
</nav>
<img src="lattee.jpg" alt="latte_coffee" width="1180px" height="550px">
<span class="logo"><img class="logo" name="logo" src="coffee-logo.jpg" alt="latte_logo" width="200px" height="200px"></span>
Use this way. You are not putting all the vendor prefixes and the duration should have units: 5000ms or 5s:
.element-animation {
animation: animationFrames linear 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 4s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
width: 50px; line-height: 50px; background: #99f; text-align: center;
}
#keyframes animationFrames {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
<div class="element-animation">Logo</div>
I am trying to make a list of social buttons. When one button is hovered it lights up, and the other buttons should darken.
I got it to work partially. When the first button is hovered all works fine, but it is malfunctioning when the other buttons are hovered. I think this happens because all the latter list items are siblings of the first and the :hover event can't cause previous elements to change style.
Does anyone have any thoughts on how to get this to work?
Here's the code (jsFiddle live demo):
<div id="bg">
<ul id="social_buttons">
<li id="item_1"><img src="http://i43.tinypic.com/104rasi.png"></li>
<li id="item_2"><img src="http://i43.tinypic.com/k4tide.png"></li>
<li id="item_3"><img src="http://i44.tinypic.com/2ry0gt3.png"></li>
</ul>
</div>
#bg {
height: 100px;
width: 215px;
background-color: black;
position: relative;
}
#social_buttons img {
width: 24px;
height: 24px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#social_buttons {
list-style-type: none;
position: absolute;
top: 20px;
right: 70px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#social_buttons li {
float: left;
margin-right: 2px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
/* puur css3 multiple hover animaties */
#item_1 {
opacity: 0.8;
}
#item_1:hover ~ #item_2, :hover ~ #item_3 {
opacity: 0.5;
}
#item_1:hover {
opacity: 0.9;
}
#item_2 {
opacity: 0.8;
}
#item_2:hover ~ #item_1, :hover ~ #item_3 {
opacity: 0.5;
}
#item_2:hover {
opacity: 0.9;
}
#item_3 {
opacity: 0.8;
}
#item_3:hover ~ #item_1, :hover ~ #item_2 {
opacity: 0.5;
}
#item_3:hover {
opacity: 0.9;
}
Something like this?
#social_buttons:hover li {
opacity: 0.5;
}
#social_buttons li:hover {
opacity: 0.9;
}
General sibling selector (~) can't select preceding element, it works only in one direction.
This is actually pretty easy with the right selectors
jsFiddle
ul li {
opacity: 0.8;
}
ul:hover li {
opacity: 0.5;
}
ul li:hover {
opacity: 1.0;
}
http://jsfiddle.net/VnMFP/4/
#social_buttons li {
opacity: 0.8;
}
#social_buttons:hover li {
opacity: 0.5;
}
#social_buttons li:hover {
opacity: 0.9
}
Don't select the li:hover, select ul#social_buttons:hover li. Then it works.