Work illustrations by Storyset Animierte Vektorgrafiken sind ein neuer Highlight die vielseitigt verwendet werden können, wie nachfolgend ein paar Beispiele zeigen können. Diese Grafiken sind überwiegend in Online-Designer-Programmen entstanden den Link zu den Plattformen findet ihr im Anhang zu den Dateien svg#freepik_stories-consulting:not(.animated) .animable {opacity: 0;}svg#freepik_stories-consulting.animated #freepik--background-complete--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Desk--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Plants--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Device--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Character--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--speech-bubble--inject-73 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;animation-delay: 0s;} @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } @keyframes slideLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } Dank Storyset von freepik svg#freepik_stories-consulting:not(.animated) .animable {opacity: 0;}svg#freepik_stories-consulting.animated #freepik--Floor--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Shadows--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedLeft;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-1--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Coins--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-2--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Gears--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--speech-bubbles--inject-116 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;} @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes lightSpeedLeft { from { transform: translate3d(-50%, 0, 0) skewX(20deg); opacity: 0; } 60% { transform: skewX(-10deg); opacity: 1; } 80% { transform: skewX(2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } svg#freepik_stories-consulting:not(.animated) .animable {opacity: 0;}svg#freepik_stories-consulting.animated #freepik--background-complete--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Shadow--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Plant--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Floor--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-1--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Desk--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Device--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-2--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--speech-bubble--inject-117 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;} @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } @keyframes slideLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } svg#freepik_stories-consulting:not(.animated) .animable {opacity: 0;}svg#freepik_stories-consulting.animated #freepik--background-complete--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Shadow--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-2--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--text-balloon--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--character-1--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-consulting.animated #freepik--Table--inject-114 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;animation-delay: 0s;} @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } } svg#freepik_stories-astronaut-suit:not(.animated) .animable {opacity: 0;}svg#freepik_stories-astronaut-suit.animated #freepik--Floor--inject-3 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-astronaut-suit.animated #freepik--Background--inject-3 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;animation-delay: 0s;}svg#freepik_stories-astronaut-suit.animated #freepik--Shadow--inject-3 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-astronaut-suit.animated #freepik--Stars--inject-3 {animation: 1s 1 forwards ease-out slideDown;animation-delay: 0s;}svg#freepik_stories-astronaut-suit.animated #freepik--Character--inject-3 {animation: 1s 1 forwards ease-in slideUp,1.5s Infinite linear floating;animation-delay: 0s,1s;} @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes floating { 0% { opacity: 1; transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0px); } } Nie war es einfacherein Comic oder eine Story zu erstellen, einfach eine Grafik platzieren unterhalb einen Text wie diesen und fertig ist die Online-Story svg#freepik_stories-global-warming:not(.animated) .animable {opacity: 0;}svg#freepik_stories-global-warming.animated #freepik--Sun--inject-365 {animation: 1.5s Infinite linear heartbeat;animation-delay: 0s;}svg#freepik_stories-global-warming.animated #freepik--buildings-2--inject-365 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-global-warming.animated #freepik--buildings-1--inject-365 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-global-warming.animated #freepik--Factory--inject-365 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;animation-delay: 0s;}svg#freepik_stories-global-warming.animated #freepik--Earth--inject-365 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn,1.5s Infinite linear shake;animation-delay: 0s,1s;}svg#freepik_stories-global-warming.animated #freepik--Thermometer--inject-365 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;} @keyframes heartbeat { 0% { transform: scale(1); } 10% { transform: scale(1.1); } 30% { transform: scale(1); } 40% { transform: scale(1); } 50% { transform: scale(1.1); } 60% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes slideDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } [GEO]Politikernste Themen mit eine Bild, einer Grafik oder einer Animation, für Presentationen oder in Berichten zu Situationen svg#freepik_stories-location-search:not(.animated) .animable {opacity: 0;}svg#freepik_stories-location-search.animated #freepik--background-simple--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Table--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedLeft;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Device--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Plant--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Character--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--speech-bubble--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Icon--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}svg#freepik_stories-location-search.animated #freepik--Text--inject-333 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;} @keyframes slideLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes lightSpeedLeft { from { transform: translate3d(-50%, 0, 0) skewX(20deg); opacity: 0; } 60% { transform: skewX(-10deg); opacity: 1; } 80% { transform: skewX(2deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: inherit; } } Produktbeschreibungfür apps oder Online-shop auch hier unendliche Verwendungsmöglichkeiten was immer ihr ausdrücken möchtet The post Animierte SVG von Storyset first appeared on arteffekt.
Amazing!!! Super, dass Du Dich für die Webentwicklung der Zukunft interessierst! Wir zeigen Dir heute den heiligen Gral der Webentwicklung. Denn Webentwicklung ist weit mehr als strukturierter und performanter Code. Web-Entwicklung beinhaltet ein Layo
zum Artikel gehenFirst of all: Was sind GIPHY GIFs überhaupt? Ein GIF steht für Graphics Interchange Format und ist ein spezielles Grafikformat. Während eine JPG-Datei ein klassisches, starres Bild ist, sind GIF-Dateien bewegte, animierte Bilder. GIFs werden oft in sozia
zum Artikel gehenDasDisplay Marketingist eine Werbeform im Internet. Werbemittel sind hierbei Bilder, Videos, Animationen oder auch Textlinks. Diese werden meist in Form von Werbebannern als statische oder animierte Grafik dargestellt. Das Ziel ist dabei dieSteigerung der
zum Artikel gehenWenn ich Text-Adventure lese, passieren zwei Dinge in meinem Kopf: Zum einen ist da durchaus eine Abneigung gegen starren Lesestoff, der mir auch in reinen Visual Novels wenig zusagt und der ja auch selten mit edler Feder geschrieben ist. Zum anderen ha
Rund um die Filmproduktion gibt es viele spannende Berufe. Eine weit weniger bekannte Aufgabe als Regie, Kamera, Licht und Schnitt ist das Motion Design. Doch was machen Motion Designer genau? Unser Beitrag gibt dir einen Überblick!
zum Artikel gehen