버전 비교

이전 버전 2

changes.mady.by.user AST01

에 저장

비교대상

새 버전 3

changes.mady.by.user AST01

에 저장

키

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.
댓글: Content imported from a Scroll Translations translation file.
Sv translation
languageko

사용자 지정 효과 만들기

사용자 지정 효과는 사용자가 작성한 CSS 스크립트를 요소에 애니메이션 효과로 적용할 수 있습니다.

정보
title참고

애니메이션 효과 적용에 대한 자세한 내용은 다음을 참조하세요. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Web Author 편집 화면 상단의 도구 바에서 (사용자 지정 효과 추가)를 클릭하세요. 팝업 창이 나타나면 다음의 항목을 차례로 설정한 다음 CSS 스크립트를 작성하세요.

  • *효과 이름

    CSS 스크립트의 이름을 작성하세요. 효과 이름을 작성하면 자동으로 CSS 스크립트 입력란이 활성화되며 효과 이름은 클래스 명으로 사용됩니다.

    정보
    title참고
    • 효과 이름은 영어 또는 숫자로만 작성할 수 있으며, 숫자로는 시작할 수 없습니다.
    • 효과 이름에는 밑줄(_), 하이픈(-) 문자만 포함할 수 있습니다.
    • 잠금을 체크하면 잠금 권한이 있는 사용자만 사용자 효과를 편집하거나 삭제할 수 있습니다.

  • 효과 종류

    사용자 지정 효과를 공통으로 추가할 것인지, 나타내기, 강조, 끝내기 중 한 종류에만 추가할 것인지 선택할 수 있습니다.

  • *CSS 스크립트

    CSS 스크립트를 작성할 수 있습니다. 내용을 작성하기 전에 먼저 효과 이름을 입력해야 합니다.

    정보
    title참고
    • CSS 스크립트는 영어로만 작성할 수 있습니다.
    • CSS 스크립트 작성 시 애니메이션 속성 또는 애니메이션 속성의 이름을 입력하면 @keyframes 키워드가 애니메이션 이름과 함께 자동 추가됩니다. CSS 스크립트에서 애니메이션 속성의 이름을 변경하면 @keyframes 키워드의 애니메이션 이름도 자동 변경됩니다.
    • 애니메이션 속성의 이름은 효과 이름 항목의 작성법과 동일한 규칙을 따르며, 추가로 'none', 'unset', 'initial' 또는 'inherit' 단어는 사용이 불가합니다.
정보
title참고

*는 필수 입력 항목입니다.

CSS 스크립트 작성 권장 사항

@keyframe 사용해 애니메이션 스크립트를 작성할 경우, 타이젠(Tizen) 장치에서 최고의 성능을 위해 다음의 속성을 사용하길 권장합니다.

  • transform 속성은 회전, 크기, 이동, 비틀기 등의 변환이 가능합니다.

    • 이동: translate(x, y)
    • 크기 조절: scale(x, y)
    • 회전: rotate(angle)
    • 비틀기: skew(x-angle, y-angle)
  • opacity 속성은 요소의 투명도를 조절합니다.
정보
title참고
  • 과도한 효과 설정은 타이젠(Tizen) 장치에서 재생이 원활하지 못할 수 있습니다.
  • 크기 조절(scale)의 경우, 다른 효과에 비해 재생이 원활하지 못할 수 있습니다.

CSS 스크립트 작성 예제

아래의 예제를 참조해 CSS 스크립트를 작성하고 사용자 지정 효과를 요소에 적용해 보세요.

이미지의 색상을 흑백으로 변환하는 효과

.grayScale {
	animation: grayscale 1s infinite;
}
@keyframes grayscale {
	0% {
		filter: grayscale(0%);
	}
	50%{
		filter: grayscale(100%);
	}
	100%{
		filter: grayscale(0%);
	}
}

요소가 위에서 아래로 내려오는 효과

.bounce-in {
	animation: bounce 1.1s both;
}
@keyframes bounce {
	0% {
		transform: translateY(-500px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	25% {
		transform: translateY(0);
		animation-timing-function: ease-out;
		opacity: 1;
	}
	40% {
		transform: translateY(-250px);
		animation-timing-function: ease-in;
	}
	60% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
	70% {
		transform: translateY(-100px);
		animation-timing-function: ease-in;
	}
	78% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
	85% {
		transform: translateY(-30px);
		animation-timing-function: ease-out;
	}
	90% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
	95% {
		transform: translateY(-20px);
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
}
Sv translation
languageen

Creating custom effects

Custom effects can be applied to the CSS script elements created for animation effects.

정보
titleNote

For details on application of animation effects, refer to the following. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Click (Add Custom Effect) in the toolbar at the top of the Web Author editing page. When a pop-up window appears, set the following items sequentially and then create the CSS script.

  • *Effect Name

    Enter the name of the CSS script. When the effect name is set, the CSS script field is automatically activated and the effect name is used as the class name.

    정보
    titleNote
    • The effect name can have alphanumeric characters and it cannot begin with number.
    • The effect name can include only the underscore (_) and hyphen (-).
    • When Lock is checked, only the users with lock permission can edit or delete custom effects.

  • Effect Type

    You can determine whether to add custom effects in common or to add any of In, Highlight, and Out.

  • *CSS Script

    Create a CSS script. Before creation, first enter the Effect Name.

    정보
    titleNote
    • The CSS script can be written only in English.
    • When you enter the animation property or its name during creation of a CSS script, the @keyframes keyword is automatically added with the animation name. When the name of the animation property is changed in the CSS script, the animation name of the @keyframes keyword is automatically changed.
    • The name of the animation property follows the same rule as in creation of the Effect Name. Additionally, the term of “none,” “unset,” “initial,” or “inherit” cannot be used.
정보
titleNote

* is a required item.

Recommendation for CSS script creation

When creating the animation script by using @keyframe, it is recommended to use the following properties in a Tizen device for best performance.

  • For the transform property, conversion of rotation, scale, movement, and twisting is possible.

    • Move: translate(x, y)
    • Scale: scale(x, y)
    • Rotate: rotate(angle)
    • Twist: skew(x-angle, y-angle)
  • The opacity property adjusts the element’s transparency.
정보
titleNote
  • Playback may not be smooth on a Tizen device due to excessive effect.
  • In case of scale, playback may not be smooth compared to other effects.

CSS script creation example

Referencing the following example, create the CSS script and apply custom effects to elements.

Conversion of Image Color to Grayscale

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

Descending from Top to Bottom

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }