イージングã¨ã¯ã€Œå‹•ãã®åŠ 減速ã€ã‚’示ã™ç”¨èªžã§ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã«ãŠã„ã¦ã¯å‹•ãã®ã€Œæ€§æ ¼ã€ã‚’表ã™ã‚‚ã®ã§ã™ã€‚é©åˆ‡ãªã‚¤ãƒ¼ã‚¸ãƒ³ã‚°ã‚’è¨å®šã™ã‚‹ã“ã¨ã§ã€æ¼”出ã¨ã—ã¦ã®å°è±¡ãŒã‹ã‚ã‚Šã¾ã™ã€‚UI体験をデザインã™ã‚‹ã†ãˆã§ã‚¤ãƒ¼ã‚¸ãƒ³ã‚°ã¯æ¬ ã‹ã›ãªã„è¦ç´ ã§ã™ã€‚ ã—ã‹ã—ã€ã‚¤ãƒ¼ã‚¸ãƒ³ã‚°ã¯å¤šãã®ç¨®é¡žãŒã‚ã‚Šã€ãã‚Œãžã‚Œã‚’把æ¡ã—的確ã«ä½¿ã„分ã‘ã‚‹ã®ã¯å°‘ã—難易度ãŒé«˜ã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。本記事ã¯ã‚¤ãƒ¼ã‚¸ãƒ³ã‚°ã®é¸å®šã«å½¹ç«‹ã¤ã€ãŠæ‰‹æœ¬çš„ãªä½¿ã„分ã‘方を紹介ã—ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã®è¦ç´„ 「イーズインã€ã¯å¾ã€…ã«åŠ 速ã€ã€Œã‚¤ãƒ¼ã‚ºã‚¢ã‚¦ãƒˆã€ã¯å¾ã€…ã«æ¸›é€Ÿã€‚ 「イーズアウトã€ã¯å¤šãã®å ´é¢ã§ã€Œå¤‰åŒ–ã®ä½™éŸ»ãŒæ®‹ã‚Šã‚„ã™ã„å°è±¡ã€ã§ã‚ªã‚¹ã‚¹ãƒ¡ã€‚ CSSã®ease-outã¨ease-inã¨ease-in-outã¯ç·©æ€¥ãŒå¼±ã„ã®ã§ã€easeを使ã†ã‹ã€ã“ã ã‚ã‚‹å ´åˆã¯cubic-bezier()を使ã†ã®ãŒã‚ˆã„。 イージングã®æ€§æ ¼ イージングã¯ã€Œæœ€åˆã¯ã‚†ã£ãã‚Šã§ã€å¾ã€…ã«æ—©ã変化ã•ã›ã‚‹ã€ã¨ã„ã£ãŸå‹•ãã®ã€Œæ€§

{{#tags}}- {{label}}
{{/tags}}