[gnome-getting-started-docs/wip/jimmac/svg-css-animation] redo animation using global sequence
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-getting-started-docs/wip/jimmac/svg-css-animation] redo animation using global sequence
- Date: Thu, 8 Oct 2015 15:53:36 +0000 (UTC)
commit 2dbfd7ef1bcea80c7f92def36f4f0292531553e4
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Oct 8 17:52:23 2015 +0200
redo animation using global sequence
- allows global infinite loop
- all keyframes have the same length
- delays done by repeating a keyframe
gnome-help/C/gs-goa1.svg | 18 ++++++++++--------
1 files changed, 10 insertions(+), 8 deletions(-)
---
diff --git a/gnome-help/C/gs-goa1.svg b/gnome-help/C/gs-goa1.svg
index c891dce..eaa6e57 100644
--- a/gnome-help/C/gs-goa1.svg
+++ b/gnome-help/C/gs-goa1.svg
@@ -20,20 +20,22 @@
<style type="text/css">
#cursor1 {
transform-origin: top left;
- animation: cursor-move 2s ease 1s, fade-in 1s linear 0s, cursor-click .25s ease 3s alternate 2;
+ animation: cursor-move 4s ease infinite,
+ fade-in 4s linear infinite,
+ cursor-click 4s ease infinite;
}
@keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
+ 0% { opacity: 0; }
+ 30% { opacity: 1; }
}
@keyframes cursor-move {
- 0% { opacity: 1; }
- /* 50% { opacity: 1; transform: translate(80px,-50px); } */
- 100% { opacity: 1; transform: translate(100px,-100px);}
+ 30% { opacity: 1; }
+ 90% { opacity: 1; transform: translate(100px,-100px);}
}
@keyframes cursor-click {
- from { transform: translate(100px,-100px) scale(1); }
- to { transform: translate(100px,-100px) scale(.5); }
+ 90% { transform: translate(100px,-100px) scale(1); }
+ 92% { transform: translate(100px,-100px) scale(.5); }
+ 100% { transform: translate(100px,-100px) scale(1); }
}
</style>
<defs
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]