CSS transitions without hover?

Philip Herlihy

unread,

Jun 12, 2016, 9:34:05 AM6/12/16

to

I have a notion for a (fairly temporary) situation where I want to cover
(fully or partially) an existing page with a notice. I want to preserve
the existing identity of the page, so having this "notice" fade in over
a couple of seconds seems a nice effect.

I've looked at CSS transitions, which I've used with advantage
elsewhere, but always in response to the hover "event". This time I
just want the notice pane to fade in on page-load. Is this possible, or
does a transition have to be triggered by a hover?

--

Phil, London

Evertjan.

unread,

Jun 12, 2016, 11:44:44 AM6/12/16

to

Philip Herlihy <thiswillb...@you.com> wrote on 12 Jun 2016 in
comp.infosystems.www.authoring.stylesheets:

They can be triggered by a javascript event,
where the javascript changes a style or a className.

Such event can be onload, and if you wish then by a setTimeOut.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Philip Herlihy

unread,

Jun 12, 2016, 12:09:19 PM6/12/16

to

In article <MPG.31c7752a3...@news.eternal-september.org>,
thiswillb...@you.com says...

Looks like the necessary trick is to trigger a style change using
JavaScript. Of course, it may be better to do the whole thing in
JavaScript...

http://www.adobe.com/devnet/archive/html5/articles/using-css3-
transitions-a-comprehensive-guide.html

(See the heading: "Triggering Transitions")

--

Phil, London

Philip Herlihy

unread,

Jun 12, 2016, 12:32:07 PM6/12/16

to

In article <XnsA625B485...@194.109.6.166>,
exxjxw.h...@inter.nl.net says...

Thanks - this'll be worth exploring for sure!

I wonder if this would work?
* Create a div which is, say, 85% of the width of the main page,
absolutely positioned, with Z-index set high, and display sent to none.
Put a CSS transition on the display property (or all) for this div.
* Set up an OnLoad function (possibly with 2s timer) which changes the
display property from none to block (?).

If this works as intended, the top-level div would fade into view after
2s. For older browers not able to handle tranitions, it would just pop
into place after 2s, but users of older browsers won't know what they're
missing! Of course, if users have JavaScript turned off they won't see
the overlay at all, but at least a <noscript> warning could tipe them
off...

--

Phil, London

Osmo Saarikumpu

unread,

Jun 12, 2016, 11:52:39 PM6/12/16

to

On 12/06/2016 19:32, Philip Herlihy wrote:
> I wonder if this would work?
> * Create a div which is, say, 85% of the width of the main page,
> absolutely positioned, with Z-index set high, and display sent to none.
> Put a CSS transition on the display property (or all) for this div.

It could save you some time if you note that the display property is not
included in the animatable properties:

https://www.w3.org/TR/css3-transitions/#animatable-css

--
Best wishes, Osmo

Philip Herlihy

unread,

Jun 13, 2016, 4:25:15 AM6/13/16

to

In article <njlam6$9kk$1...@dont-email.me>, os...@weppipakki.com says...

Oops! Thank you!

I can see why it might not be - changes the whole page. I guess opacity
is the property to look at, then...

--

Phil, London

Evertjan.

unread,

Jun 13, 2016, 5:31:14 AM6/13/16

to

Philip Herlihy <thiswillb...@you.com> wrote on 13 Jun 2016 in
comp.infosystems.www.authoring.stylesheets:

Try
position:fixed;
and change the position from out-of-sight, say
left:-300px;top:-300px;
to
left:25px;top:25px;
and animate the change of left & top.

or play with opacity:0; to opacity:1;

Stanimir Stamenkov

unread,

Jun 13, 2016, 5:55:29 PM6/13/16

to

Sun, 12 Jun 2016 14:34:03 +0100, /Philip Herlihy/:

I would use a CSS animation instead:

<!DOCTYPE html>

<style>
#notice {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
animation: 5s 1 forwards notice-fade;
}
#notice > :first-child {
background-color: white;
color: black;
margin: auto;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes notice-fade {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
</style>

Normal content... 
 
 
 
 ... end.

<div id="notice">
This is a notice.
</div>

--
Stanimir

Stanimir Stamenkov

unread,

Jun 13, 2016, 6:14:05 PM6/13/16

to

Tue, 14 Jun 2016 00:55:28 +0300, /Stanimir Stamenkov/:

One problem I've noticed – even with 'opacity: 0' the "notice"
appears to obscure the normal content. I've tried animating to
'z-index: -1' fixes it:

80% { opacity: 1; z-index: 1; }
100% { opacity: 0; z-index: -1; }

Evertjan.

unread,

Jun 13, 2016, 6:18:54 PM6/13/16

to

Stanimir Stamenkov <s7a...@netscape.net> wrote on 13 Jun 2016 in
comp.infosystems.www.authoring.stylesheets:

This will make the normal content selectable:

@keyframes notice-fade {
0% { opacity: 1;z-index:1; }
50% { opacity: 1;z-index:1; }
100% { opacity: 0;z-index:-8; }

}

> </style>
>
> Normal content... 
> 
> 
> 
> ... end.
>
> <div id="notice">
> This is a notice.
> </div>
>

--

Philip Herlihy

unread,

Jun 14, 2016, 9:38:48 AM6/14/16

to

In article <njna4f$j3e$1...@dont-email.me>, s7a...@netscape.net says...

Nice!

:-)

--

Phil, London

Philip Herlihy

unread,

Jun 14, 2016, 9:39:08 AM6/14/16

to

In article <XnsA6267513...@194.109.6.166>,
exxjxw.h...@inter.nl.net says...

Thanks for this - I think opacity appeals more.

--

Phil, London

Osmo Saarikumpu

unread,

Jun 14, 2016, 10:27:32 AM6/14/16

to

On 14/06/2016 01:18, Evertjan. wrote:
> This will make the normal content selectable:
>
> @keyframes notice-fade {
> 0% { opacity: 1;z-index:1; }
> 50% { opacity: 1;z-index:1; }
> 100% { opacity: 0;z-index:-8; }
> }

Or more succinctly, remove the above z-index properties and add e.g.:

z-index:-1;

to #notice.

--
Best wishes, Osmo

Evertjan.

unread,

Jun 14, 2016, 11:22:17 AM6/14/16

to

Osmo Saarikumpu <os...@weppipakki.com> wrote on 14 Jun 2016 in
comp.infosystems.www.authoring.stylesheets:

> sgroups: comp.infosystems.www.authoring.stylesheets

Well, not my preference.

Then you would miss the "modal" effect,
that the selectability only comes up after the popup has [nearly] gone.

I would change the 50% to 95%, btw.

Philip Herlihy

unread,

Jun 15, 2016, 5:25:36 AM6/15/16

to

In article <MPG.31c7752a3...@news.eternal-september.org>,
thiswillb...@you.com says...
>

Thanks everyone. Used an animation in the end. Love it!

http://villagemusic.walthamsoft.com

The relevant CSS is in here:
http://walthamsoft.com/villagemusic/fade.css

--

Phil, London

Philip Herlihy

unread,

Jun 15, 2016, 5:42:08 AM6/15/16

to

In article <MPG.31ca8ac4e...@news.eternal-september.org>,
thiswillb...@you.com says...

It seems to work on all but one browser here. IE9 on an old Vista box
ignores the animation, which is fine; so does the built-in browser on my
ageing Android mobile. Same with the newest Safari that'll run on
Windows. On a new Android tablet in Chrome, it's fine. Yet on a
similarly new mobile, in Chrome (definitely running the latest version)
the images are broken. You can see the animation grow in opacity, but
all you get is a horizontal bar - as if the image was picking up 5px or
so as its height somehow. The images in the title bar are missing, too.
All other instances of Chrome are fine. Is this something I can fix in
my code, or should I see it as a peculiarity of that one phone? (I'd
guess there must be others out there...)

Screenshot:
http://www.walthamsoft.com/villagemusic/temp-screenshot.png

I'd guess this browser is not handling my "scaleable images", as the
animation seems to be working on what's left.

I think the relevant CSS for that would be these lines:

img { max-width: 100%; }
img#churchdoor {
float: left;
width: 25%;
max-width: 178px;
padding-right: 3%;
display: block;
}
img#cat {
float:right;
width: 25%;
max-width: 178px;
display: block;
}
img#mainimg {
width: 80%;
display:block;
margin: 3em auto 3px auto;
border: 4px solid black;
-ms-box-shadow: 12px 12px 60px #000;
-moz-box-shadow: 12px 12px 60px #000;
-webkit-box-shadow: 12px 12px 60px #000;
box-shadow: 12px 12px 60px #000;
}

--

Phil, London

Allodoxaphobia

unread,

Jun 15, 2016, 9:29:44 PM6/15/16

to

On Wed, 15 Jun 2016 10:42:09 +0100, Philip Herlihy wrote:

> It seems to work on all but one browser here.

FWIW, it plays nice on two older browsers here: Opera 12.16 and
Firefox 20.0. It "fails" gracefully on two other old browsers:
Chrome 27.0.1453.110 and konqueror 3.5.10 -- the image Just Appears
upon load.

Jonesy
--
Marvin L Jones | Marvin | W3DHJ.net | linux
38.238N 104.547W | @ jonz.net | Jonesy | FreeBSD
* Killfiling google & XXXXbanter.com: jonz.net/ng.htm

dorayme

unread,

Jun 16, 2016, 1:38:18 AM6/16/16

to

In article <MPG.31ca8ac4e...@news.eternal-september.org>,
Philip Herlihy <thiswillb...@you.com> wrote:

> http://villagemusic.walthamsoft.com

Beautiful sunset!

--
dorayme

Philip Herlihy

unread,

Jun 16, 2016, 10:14:45 AM6/16/16

to

In article <slrnnm4089.1a2k.k...@vps.jonz.net>,
knock_you...@example.net says...

>
> On Wed, 15 Jun 2016 10:42:09 +0100, Philip Herlihy wrote:
>
> > It seems to work on all but one browser here.
>
> FWIW, it plays nice on two older browsers here: Opera 12.16 and
> Firefox 20.0. It "fails" gracefully on two other old browsers:
> Chrome 27.0.1453.110 and konqueror 3.5.10 -- the image Just Appears
> upon load.
>
> Jonesy

Useful - thanks!

--

Phil, London

Ram Tobolski

unread,

Jun 16, 2016, 1:05:09 PM6/16/16

to

Looks fine on Chrome on my Android phone.

Philip Herlihy

unread,

Jun 18, 2016, 10:50:08 AM6/18/16

to

In article <4048b435-b6c4-46a8...@googlegroups.com>,
ram...@gmail.com says...

>
> Looks fine on Chrome on my Android phone.

Thanks - useful!

--

Phil, London