Vladislav Shpilevoy PRO
Database C developer at Tarantool. Backend C++ developer at VirtualMinds.
Some tricks I use in my decks to make them looking alive
For usage you would need Pro version
.rotating2 {
-webkit-animation: rotation 2s infinite linear;
}
.rotating1 {
-webkit-animation: rotation 1s infinite linear;
}
.rotating1_rev {
-webkit-animation: rotation-rev 1s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-webkit-keyframes rotation-rev {
to {
-webkit-transform: rotate(0deg);
}
from {
-webkit-transform: rotate(359deg);
}
}
Put into 'Style options' -> 'Css editor'
.move_cpu {
x-transition: all 1s ease-in-out;
animation: ani 1.7s infinite;
position: relative;
}
@keyframes ani {
0% {
top: 0;
}
50% {
top: 300px;
}
100% {
top: 0;
}
}
Put into 'Style options' -> 'Css editor'
.send_example {
x-transition: all 1s linear;
animation: send_example_ani 1.7s infinite;
position: relative;
}
@keyframes send_example_ani {
0% {
top: 0;
opacity: 1;
}
50% {
top: 300px;
opacity: 1;
}
75% {
top: 300px;
opacity: 0;
}
76% {
top: 0px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
Put into 'Style options' -> 'Css editor'
.move_rotate_example {
x-transition: all 1s ease;
animation: move_rotate_example_ani 2s infinite;
position: relative;
}
@keyframes move_rotate_example_ani {
0% {
top: 0;
}
50% {
top: 100px;
transform: rotate(45deg);
}
100% {
top: 0;
}
}
Put into 'Style options' -> 'Css editor'
.slides section .fragment_slow {
opacity: 0;
visibility: hidden;
transition: all 1s ease; }
.slides section .fragment_slow.visible {
opacity: 1;
visibility: inherit; }
.slides section .fragment_delay05 {
transition-delay: 0.5s;
}
.slides section .fragment_delay1 {
transition-delay: 1s;
}
Put into 'Style options' -> 'Css editor'
.pulse_def(@name, @color, @size, @frequency: 1s) {
@color_faded: fade(@color, 60%);
@color_transparent: fade(@color, 0%);
.@{name} {
box-shadow: 0 0 0 @color_faded;
animation: @name @frequency infinite;
}
@keyframes @name {
0% {
-moz-box-shadow: 0 0 0 0 @color_faded;
box-shadow: 0 0 0 0 @color_faded;
}
70% {
-moz-box-shadow: 0 0 0 @size @color_transparent;
box-shadow: 0 0 0 @size @color_transparent;
}
100% {
-moz-box-shadow: 0 0 0 0 @color_transparent;
box-shadow: 0 0 0 0 @color_transparent;
}
}
}
.pulse_def(pulse-black, rgb(0, 0, 0), 40px, 1s);
.pulse_def(pulse-red, rgb(255, 0, 0), 20px, 2s);
Put into 'Style options' -> 'Css editor'
.fragment_zoom_def(@name, @scale1: 2, @scale2: 1) {
.slides section .@{name} {
transform: scale(@scale1);
visibility: hidden;
}
.slides section .@{name}.visible {
transform: scale(@scale2);
visibility: inherit;
}
}
.fragment_zoom_def(fragment_zoom_out)
Put into 'Style options' -> 'Css editor'
By Vladislav Shpilevoy
Database C developer at Tarantool. Backend C++ developer at VirtualMinds.