{"id":30,"date":"2024-05-13T15:41:36","date_gmt":"2024-05-13T19:41:36","guid":{"rendered":"https:\/\/sites.temple.edu\/elizabethanewnam\/?page_id=30"},"modified":"2024-05-14T21:07:58","modified_gmt":"2024-05-15T01:07:58","slug":"test2","status":"publish","type":"page","link":"https:\/\/sites.temple.edu\/elizabethanewnam\/test2\/","title":{"rendered":"WEB MAPPING"},"content":{"rendered":"

div {
\n width: 100px;
\n height: 100px;
\n background-color: red;
\n position: relative;
\n animation-name: example;
\n animation-duration: 4s;
\n animation-iteration-count: 2;
\n animation-direction: alternate-reverse;
\n}<\/p>\n

@keyframes example {
\n 0% {background-color:red; left:0px; top:0px;}
\n 25% {background-color:yellow; left:200px; top:0px;}
\n 50% {background-color:blue; left:200px; top:200px;}
\n 75% {background-color:green; left:0px; top:200px;}
\n 100% {background-color:red; left:0px; top:0px;}
\n}<\/p>\n

CSS Animation<\/h1>\n

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value “alternate-reverse” to make the animation run backwards first, then forwards:<\/p>\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate-reverse; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } CSS Animation The animation-direction property specifies whether an animation should be played… Read More »WEB MAPPING<\/span><\/a><\/p>\n","protected":false},"author":35598,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/users\/35598"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":3,"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/pages\/30\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/sites.temple.edu\/elizabethanewnam\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}