[2015.09.23] 메뉴UI - 아크형태로 팝업하는 아기자기한 메뉴 아이콘

아기자기한 메뉴 icon 이네요.

animation 효과를 css3의 keyframe, transform을 이용하여 순수하게 css 만으로 구현했네요 

IE 10 이상 사용가능.

CSS Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Property Values

Value	Description
animationname	Required. Defines the name of the animation.
keyframes-selector	Required. Percentage of the animation duration. Legal values: 0-100% from (same as 0%) to (same as 100%) Note: You can have many keyframes-selectors in one animation.
css-styles	Required. One or more legal CSS style properties

Syntax

transform: none|transform-functions|initial|inherit;

Property Values

Value	Description	Play it
none	Defines that there should be no transformation	Play it »
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values	Play it »
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y)	Defines a 2D translation	Play it »
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a translation, using only the value for the X-axis	Play it »
translateY(y)	Defines a translation, using only the value for the Y-axis	Play it »
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale(x,y)	Defines a 2D scale transformation	Play it »
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a scale transformation by giving a value for the X-axis	Play it »
scaleY(y)	Defines a scale transformation by giving a value for the Y-axis	Play it »
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter	Play it »
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis	Play it »
rotateY(angle)	Defines a 3D rotation along the Y-axis	Play it »
rotateZ(angle)	Defines a 3D rotation along the Z-axis	Play it »
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis	Play it »
skewX(angle)	Defines a 2D skew transformation along the X-axis	Play it »
skewY(angle)	Defines a 2D skew transformation along the Y-axis	Play it »
perspective(n)	Defines a perspective view for a 3D transformed element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

* css3 keyframe, translate 사용 코드

 

@keyframes harlem {

  0% {

    transform: translate(0);

    -webkit-transform: translate(0);

    -moz-transform: translate(0);

    -o-transform: translate(0);

    -ms-transform: translate(0);

  }

  25% {

    transform: translate(5px, 5px);

    -webkit-transform: translate(5px, 5px);

    -moz-transform: translate(5px, 5px);

    -o-transform: translate(5px, 5px);

    -ms-transform: translate(5px, 5px);

  }

  50% {

    transform: translate(-5px, -5px);

    -webkit-transform: translate(-5px, -5px);

    -moz-transform: translate(-5px, -5px);

    -o-transform: translate(-5px, -5px);

    -ms-transform: translate(-5px, -5px);

  }

  75% {

    transform: translate(2px, 2px);

    -webkit-transform: translate(2px, 2px);

    -moz-transform: translate(2px, 2px);

    -o-transform: translate(2px, 2px);

    -ms-transform: translate(2px, 2px);

  }

  100% {

    transform: translate(0);

    -webkit-transform: translate(0);

    -moz-transform: translate(0);

    -o-transform: translate(0);

    -ms-transform: translate(0);

  }

}







참고 : CSS3 @keyframes Rule - http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

  CSS3 transform properties - http://www.w3schools.com/cssref/css3_pr_transform.asp




  







간단한 사용 예제 및 Demo

See the Pen Gooey link holder by Akshay Nair (@phenax) on CodePen.