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/
Related
I create a shape in CSS
.a {
transform: scale(1);
border-radius:100%;
width:100px;
height:100px;
background-color:#444;
transition: all .5s;
}
On hover I'm going to increase the scale over .5s.
.a:hover {
transform: scale(1.2);
}
How can I set a delay and return back to the original scale?
Thanks
Is this the kind of effect you're looking for? You can use the delay property for the translation rule.
.a {
border-radius: 100%;
color: #333;
font-weight: bold;
font-size: 1.5em;
padding: 2em;
width: 100px;
height: 100px;
background-color: #e3e3e3;
transform: scale(1);
transition: all .5s 2s;
}
.a:hover {
transform: scale(1.2);
transition: all .5s 0s;
}
<p class="a">Hello World.</p>
There is a tutorial for transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
And Try ıt:
transition: all 0.5s ease-out;
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;
}
Like in the question, I have a code
How to make this effect work on many text lines and not as it is now - the effect appears only in 1 of e.g. 2 text lines (like example)
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none; /* For Example */
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--00a3a3);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
test
<br>
<br>
<a href="#">test
<br>
test2
</a>
Use background combined with box-decoration-break to have a duplicated effect on each line
:root {
--00a3a3: #00a3a3;
}
a {
text-decoration: none;
background:linear-gradient(var(--00a3a3),var(--00a3a3)) bottom center no-repeat;
background-size:0% 2px;
transition: all 0.3s ease-in-out 0s;
/* Remove the below to see the diffrence */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
a:hover{
background-size:100% 2px;
}
test
<br>
<br>
<a href="#">test
<br>
test2
</a>
Get rid of the ::before. Instead apply a background-image to the <a>.
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none; /* For Example */
background-image: linear-gradient(#00a3a3, #00a3a3);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:hover {
background-size: 100% 2px;
}
test
<br>
<br>
<a href="#">test
<br>
test2
</a>
Edit:
The problem is that the :before pseudo-element doesn't know that your <a> is two lines. It's just adding a new block element inside it and taking the shape you give it.
If you know that your links will always be two lines, you might be able to get away with using an :after for the second line, like this:
:root {
--00a3a3: #00a3a3;
}
a {
position: relative;
text-decoration: none;
/* For Example */
}
a:before,
a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: var(--00a3a3);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:before {
bottom: 0;
}
a:after {
bottom: 1em;
}
a:hover:before,
a:hover:after {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
test
<br>
<br>
<a href="#">test
<br>
test2
</a>
(But you're probably better off restructuring your code to remove the :before.)
This is auto fade out after hover css animation
I'm trying to show a notification on video play button. The button click actually clicked for video play. I want to show a div with its content with the play icon. However, I would like to fade out the play icon, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt. Please inform me if better solution here.
Here is the live Demo
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.animation-container {
width: 1000rem;
height: 30rem;
}
.first-text {
font-size: 4rem;
position: absolute;
left: 2.5rem;
top: 5rem;
color: white;
-webkit-animation: fadeOut 2s forwards;
animation: fadeOut 2s forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.first-text:hover {
-webkit-animation: fadeIn 0s forwards;
animation: fadeIn 0s forwards;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<section class="animation-box">
<h1 class="first-text">This is auto fade out after hover </h1>
</section>
You can achieve this with just transition :
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
h1{
opacity:0;
transition: opacity 250ms 5s ease;
}
.animation-box:hover h1{
opacity:1;
transition-delay: 250ms;
}
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.Class {
transition: all 0.5s;
color: #ff0;
margin: 50px;
font-size: 28px;
cursor: pointer;
}
.Class:hover {
color: #00f;
}
<p class="Class"> This is me </p>
Use transition:0.5s ease with opacity:0
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.animation-box{
transition: 0.5s ease;
}
.animation-box:hover{
opacity:0;
transition: 0.5s ease;
}
I have alot of CSS and its throwing me off. I need an image to become less opaque when I hover on it and a child element, but the child element slides in when the image is hovered on. I got half of it to work, but the image returns to full opacity when the child element is hovered on. I can't get the selector right. Here is whats working now http://www.fuzionvideos.com/#video_recent
Here is the code:
<ul><li id="vid_link" class="box 1"><img src="http://www.fuzionvideos.com/images/uploads/SF_BoT.jpg" alt="Belt - Truth"> <span class="caption description">Armor of the Lord: Belt of Truth</span><b class="title_line">Belt - Truth</b></li></ul>
and the CSS:
#vid_display .box {
cursor: pointer;
height: 199px;
overflow: hidden;
width: 300px;
float: left;
position: relative;
}
#vid_display .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
position: absolute;
left: 0;
}
#vid_display .box .caption {
position: absolute;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#vid_display .box .description {
height: 90px;
width: 300px;
display: block;
bottom: -140px;
line-height: 25pt;
text-align: left;
padding-left: 8px;
line-height:normal;
}
#vid_display .box:hover .description {
-moz-transform: translateY(-150%);
-o-transform: translateY(-150%);
-webkit-transform: translateY(-150%);
transform: translateY(-150%);
}
#vid_display ul {
padding-left: 0px;
}
#vid_display li{
display: inline;
margin-right: 18px;
}
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#vid_display a :hover {
color: #ed1c24;
}
.title_line {
background-color:#ebebeb;
position: absolute;
height: 25px;
width: 300px;
top: 169px;
left: 0;
z-index: 101;
padding-top: 8px;
}
and on jsfiddle : http://jsfiddle.net/blalan05/FkV2z/
You're applying opacity to the hovered image. So, when you hover on anchor, the image is no longer hovered. Try applying the :hover for the .box, so when you will hover on the anchor (which is a child of .box) the .box will be still considered as hovered.
Change this:
#vid_display img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
to this:
#vid_display .box:hover img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}