Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@dvoytenko @aghassemi
190 lines (174 sloc) 5.17 KB
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>Animations Examples</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.buttons {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.block {
width: 100px;
height: 100px;
display: block;
background: pink;
position: absolute;
top: 50px;
left: 10px;
z-index: 2;
--start-y: -240px;
--start-o: 0.1;
}
.rot-image {
--angle: 20deg;
--delay: 0.1s;
}
#image3 {
--angle: 10deg;
--delay: 0.4s;
}
.rain {
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 0;
z-index: 1000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}
.drop {
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.25);
border-radius: 50%;
}
@keyframes rotate {
100% {
transform: rotate(calc(var(--angle) * -3));
}
}
@supports (unknown: red) {
@keyframes rotate {
100% {
transform: rotate(calc(var(--angle) * -6));
}
}
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</head>
<body>
<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
{
"duration": "1s",
"iterations": "4",
"fill": "both",
"direction": "alternate",
"animations": [
{
"media": "(max-width: 320px)",
"selector": ".rot-image",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes": {
"transform": "rotate(var(--angle))"
}
},
{
"media": "(min-width: 321px)",
"selector": ".rot-image",
"delay": "var(--delay)",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes": "rotate"
},
{
"animation": "anim2",
"selector": "#image2",
"easing": "cubic-bezier(0,0,.21,1)"
},
{
"animation": "anim-rain",
"--max-delay": "5s"
}
]
}
</script>
</amp-animation>
<amp-animation id="anim2" layout="nodisplay">
<script type="application/json">
{
"keyframes": [
{"transform": "translateX(calc(width('#image1') / 2)) translateY(var(--start-y))", "opacity": "var(--start-o)"},
{"transform": "translateY(calc(10% + 10px))", "opacity": "calc(var(--start-o) * 7)"}
]
}
</script>
</amp-animation>
<amp-animation id="anim-rain" layout="nodisplay">
<script type="application/json">
{
"selector": ".drop",
"--delay": "rand(0.1s, var(--max-delay))",
"delay": "var(--delay)",
"direction": "normal",
"subtargets": [
{
"index": 0,
"direction": "reverse"
},
{
"selector": ".antigrav",
"direction": "reverse",
"--delay": "0s"
}
],
"keyframes": {"transform": "translateY(120vh)"}
}
</script>
</amp-animation>
<div class="rain">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop antigrav"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
<amp-img id="image1" class="rot-image"
src="img/sea@2x.jpg"
width=527 height=193 layout="responsive"></amp-img>
<amp-img id="image3" class="rot-image"
src="https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h367-no/PANO_20150726_171347%257E2.jpg"
width=527 height=193 layout="responsive"></amp-img>
<amp-img id="image2"
class="block"
layout="responsive" width="100" height="100"
src="img/hero@1x.jpg"></amp-img>
<a id="a1"></a>
<div class="buttons">
<button on="tap:anim1.start">Start</button>
<button on="tap:anim1.restart">Restart</button>
<button on="tap:anim1.restart(delay='-0.5s')">Restart at -0.5s</button>
<button on="tap:anim1.pause">Pause</button>
<button on="tap:anim1.resume">Resume</button>
<button on="tap:anim1.togglePause">Toggle Pause</button>
<button on="tap:anim1.seekTo(time=2000)">Seek to 500</button>
<button on="tap:anim1.seekTo(percent=0.5)">Seek to 50%</button>
<button on="tap:anim1.reverse">Reverse</button>
<button on="tap:anim1.finish">Finish</button>
<button on="tap:anim1.cancel">Cancel</button>
</div>
</body>
</html>
You can’t perform that action at this time.