I have a long image that I want to slide on the screen with a scrolling effect, like on the apple tv's webpage (the floating/scrolling movie covers):
this is the markup i use:
<div class="header">
<div class="slider">
</div>
</div>
and this is the css:
.header{
height: 610px;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.header .slider{
height: 540px;
background: url("../images/header.jpg");
position: relative;
border-left: 10px rgb(34,34,34) solid;
border-bottom: 10px rgb(34,34,34) solid;
border-right: 10px rgb(34,34,34) solid;
left: 0;
top: 60px;
width: 450%;
animation: moveSlideshow 40s linear infinite;
-webkit-animation: moveSlideshow 40s linear infinite;
-moz-animation: moveSlideshow 40s linear infinite;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
here is the css animation:
#keyframes moveSlideshow {
100% {
-webkit-transform: translateX(-300%);
}
}
it occurs that the slideshow is scrolling but for only once and it soon scrolls out of the screen after the entire image is scrolled(and also with some part of the beginning!)..
the image is:
please help
Do You mean something like this?
#keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-webkit-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-o-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
#-moz-keyframes slide-banner {
0% {background-position: 0 0;}
100% {background-position: -300px 0;}
}
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}
<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>
I'm not familiar with the apple tv effect you're referencing, but if you want it to loop over and over you need to add an additional keyframe # 0% with translateX(0); and then use the width of the image in your # 100% translateX();
So if you have a 2000px image your animation would look like :
#keyframes moveSlideshow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-2000px);
}
}
Here's a pen: http://codepen.io/NeilWkz/pen/wWMzwe
(!NOTE: I turned on auto-prefixer as you code was busted in everything but chrome !)
The below code display animated text in most browsers, except IE where It runs but you don't see it. Could I have some guidance on how to solve this?
Please refer to this link to see the example > http://jsfiddle.net/pherrera/posvken7/
and here is the code:
<div class="container">
<div id="background" class="card">
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h3 class="frame-1">message 1</h3>
<h3 class="frame-2">message 2</h3>
<h3 class="frame-3">message 3</h3>
<h3 class="frame-4">Now!</h2>
<h3 class="frame-5">
<span>this</span> <span>is</span> <span>a message</span>
</h3>
<a class="sp-circle-link" href="#">again!</a>
</div>
</div>
</div>
</div>
body, html {
background-color: #282828;
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.card {
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border: 0px none;
-webkit-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
}
#background {
width: 600px;
height: 500px;
margin: 0 auto;
background: rgba(92, 92, 92, 1);
background: -moz-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(92, 92, 92, 1)), color-stop(100%, rgba(59, 59, 59, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: radial-gradient(ellipse at center, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#3b3b3b', GradientType=1);
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h3 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 60px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h3.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h3.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h3.frame-3 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h3.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h3.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h3.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Basically the only issue here that modern versions of IE will have a problem with is rendering a shadow on an transparent element. This is a known limitation with a couple of quirks; if the blur radius is 0 then text will be visible. Otherwise, for a shadow to be cast, the color of the text needs to be somewhat opaque.
After playing with this for a brief time I came up with a potential work-around that should suffice in your demo. Since text-shadows already work, and are able to be positioned from an offset, you can position the element itself in the opposite direction:
.blur {
top: -100vh;
position: relative;
text-shadow: 0 100vh 1em #000;
}
In order to show only a blurred text, we push the shadow down 100vh. This will set it off-screen, so we also push the element casting the shadow up 100vh, which restores the blurred text to the original position of its host element.
In this case I'm usin ga veritcal offset, but you may find that this is not ideal for some scenarios. For instance, your document is taller, and your blurred regions are further down, you may find that a lateral offset is better. In that case, you can avoid unnecessary scrollbars by hiding lateral overflow:
body {
overflow-x: hidden;
}
I've composed a demo fiddle that shows the results online here. Upon constructing this, I did notice that Chrome presently has a layout issue which is evident during resizing — it appears the vm (and presumably vh) are not kept in sync with the current viewport dimensions. You may need to use another unit if this presents an issue with your project.
Applying this effect to works that appear with a delay is also possible. I've taken the liberty to create a second fiddle that demonstrates this effect. The markup for which is very straight-forward, resembling what you already have:
<h1>
<span>Hello</span>
<span>World</span>
</h1>
<h2>
<span>Additional</span>
<span>Information</span>
<span>Provided</span>
<span>Eventually</span>
</h2>
The CSS accomplishes a few things:
Center the text in the <body> (could be limited to the headers)
Position elements off-screen, and text-shadows on-screen
Animate text-shadow property at various delays to reveal nested <span> elements
body {
text-align: center;
font-family: "Segoe UI";
}
span {
opacity: 0;
vertical-align: middle;
text-shadow: 100vw 0 3em #000;
position: relative; left: -100vw;
animation: fadein 2s ease-in-out forwards;
}
/* Controls 'Hello' and 'World' */
h1 span:nth-child(1) { animation-delay: 1s; }
h1 span:nth-child(2) { animation-delay: 2s; }
/* Controls 'Stack Overflow is Awesome */
h2 span { animation-delay: 3s; }
#keyframes fadein {
to {
opacity: 1;
text-shadow: 100vw 0 0 #000;
}
}
The end-result is a smooth, cross-browser, blurring effect:
DONE:
After some digging around the net, I managed to add some bits of code that made it work on IE (IE 11 at least).
I pretty much had to add and fiddle with these lines:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
zoom: 1; filter: alpha(opacity=0);
See here: http://jsfiddle.net/posvken7/8/
Css animations, child selectors, and gradients are supported in IE7, check out caniuse.com to see what css is supported in each browser/version.
Also, filter and animation are not supported in IE at all.
Oh, and it breaks in IE 9, it that helps anyone.
Despite prefixes, I don't know why transform: scale is not working in Chrome, Safari, IE, but works only in Firefox.
Could somebody point out how to fix this issue? Maybe changing width and height in keyframes is better option?
Check this short CSS below line 109:
.icon-elements p.wizjer {
background: black;
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
margin-top: 108px;
margin-left: 109px;
z-index: 97;
display: block;
border: 1px solid gray;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
-webkit-animation-name: ap-wizjer;
-moz-animation-name: ap-wizjer;
-ms-animation-name: ap-wizjer;
animation-name: ap-wizjer;
animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes ap-wizjer {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
jsFiddle
Thx.
You just need to add the vendor prefix for the animation duration -webkit-animation-duration: 7s;
. Hope this helps :)
I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any pointers?
.dummy-wrap {
animation: slideup 2s;
-moz-animation: slideup 2s;
-webkit-animation: slideup 2s;
-o-animation: slideup 2s;
}
.success-wrap {
width: 75px;
min-height: 20px;
clear: both;
margin-top: 10px;
}
.successfully-saved {
color: #FFFFFF;
font-size: 20px;
padding: 15px 40px;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #00b953;
}
#keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-moz-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-webkit-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-o-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
Here is another way to do the same.
fadeIn effect
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
fadeOut effect
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
UPDATE 1:
I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elements and Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition here with sample code.
UPDATE 2: (Added details requested by #big-money)
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see a detailed article here.
I know I am too late to answer but posting this answer to save others time.
You can use transitions instead:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
Since display is not one of the animatable CSS properties.
One display:none fadeOut animation replacement with pure CSS3 animations, just set width:0 and height:0 at last frame, and use animation-fill-mode: forwards to keep width:0 and height:0 properties.
#-webkit-keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
#keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
.display-none.on{
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
}
This is the working code for your question.
Enjoy Coding....
<html>
<head>
<style>
.animated {
background-color: green;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;animation-duration: 10s;
-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
</body>
</html>
You forgot to add a position property to the .dummy-wrap class, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
http://jsfiddle.net/dYBD2/2/
.fadeOut{
background-color: rgba(255, 0, 0, 0.83);
border-radius: 8px;
box-shadow: silver 3px 3px 5px 0px;
border: 2px dashed yellow;
padding: 3px;
}
.fadeOut.end{
transition: all 1s ease-in-out;
background-color: rgba(255, 0, 0, 0.0);
box-shadow: none;
border: 0px dashed yellow;
border-radius: 0px;
}
demo here.
This may help :-
<!DOCTYPE html>
<html>
<head>
<style>
.cardiv{
height:200px;
width:100px;
background-color:red;
position:relative;
text-align:center;
overflow:hidden;
}
.moreinfo{
height:0%;
transition: height 0.5s;
opacity:1;
position: absolute;
bottom:0px;
background-color:blue;
}
.cardiv:hover .moreinfo{
opacity: 1;
height:100px;
}
</style>
</head>
<body>
<div class="cardiv">
<div class="moreinfo">Hello I am inside div</div>
</div>
</body>
</html>
Use the forwards fill-mode in CSS for it to remain on the last part of the animation.
I suggest using transform: tranlsateY(-20px); instead of using css positions, but if you insist of using it then set the .dummy-wrap position into absolute
.dummy-wrap {
animation: slideup 2s forwards;
-moz-animation: slideup 2s forwards;
-webkit-animation: slideup 2s forwards;
-o-animation: slideup 2s forwards;
position: absolute;
}
#keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
You can remove element from the page via Position Absolute;
then:
transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;
then when you want element to appear, use this class:
opacity: 1;
transform: translateX(0px);
logic here is that: Transform -> removes/places element into the view INSTANTLY; while opacity takes care of the Fade In / Out effects
We also added slight delay with transiton-delay, to make it little bit better
NOTE: if you don't like TranslateX, you can replace it with scale(0); scale(1) -> to make element appear and disappear instantly
I'm trying to run multiple webkit animations at once. Demo can be seen here:
HTML:
<body>
<div class="dot"></div>
</body>
JavaScript:
$(function(){
$('body').append('<div class="dot" style="left:100px; top:200px"></div>');
});
CSS:
body{
background: #333;
}
.dot{
background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
border-radius: 6px;
background: red;
display: block;
height: 6px;
position: absolute;
margin: 40px 0 0 40px;
width: 6px;
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-animation: shrink 2.s ease-out;
-webkit-animation: pulsate 4s infinite ease-in-out;
}
#-webkit-keyframes shrink{
0%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(2);
}
50%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1.5);
}
100%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes pulsate{
0%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
50%{
-webkit-transform: scale(1.1);
-webkit-box-shadow: 0 0 2px 2px #111;
}
100%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
}
.dot has two animations:
shrink
pulsate (hard to see but it's there)
Perhaps I need to find a good way sync them. Once shrink animation is done, pulsate. I can't run them both at once so pulsate is commented out in .dot.
Any suggestions? Thanks.
You can separate multiple animations with a , and set a delay on the second one if needed:
-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
2s in the second animation is the delay
Since Chrome 43 and Safari 9/9.2, the -webkit- prefix is only needed for Blackberry and UC (Android) browser. So the new correct syntax would be
animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;