css의 꽃!! animation을 정리해보쟈!!! 📌animation animation은 transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다. animation: doyi_bg 4.5s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1; 단축형식 : name | duration | timing-function | delay | iteration-count | direction name 은 필수 값이다. 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다. @keyframes doyi_bg { 0% { opacity: 0; } 60% { opacity: 0; } 70% { opacity: 1; } } transition과 다른점..
Animation
이번에 새로 만들어진 animation효과이다! scoll내리면 나오는 효과 주고 싶어서 gsap랑 이것 저것 찾아보던 중 animation-timeline을 발견했다! 너무너무 간편하게 사용할 수 있다! 📌animation-timeline : scroll() animation-timeline:scroll(root block); () 안에는 기준이 되는 스크롤바를 적어주면 된다. 오른쪽 nearest -> 가장 가까운 부모 self -> 나 자신 root -> viewpoint 왼쪽 block - 세로 inline - 가로 📌animation-timeline : view() animation-timeline:view(root block); view()는 브라우저 전체 기준이 아닌 현재 보여지는 화면이 기..
📌css-box shadow box-shadow를 만들면 요소를 감싸는 그림자를 만들 수 있다. 그림자 만들어진 것을 확인할 수 있다. 그렇다면 box 안쪽에 그림자를 주려면 어떻게 해야할까? box-shadow 속성 맨 앞에 inset을 붙여주면 된다. 그렇다면 그림자 여러개를 겹쳐서 사용하는 것은 어떻게 할까? , 로 계속해서 그림자를 추가하면 된다. 안쪽그림자와 바깥쪽 그림자를 잘 활용하면 멋진 동그라미를 만들어볼 수 있다. box-shadow를 활용해 animation을 적용시킨 모습이다. 정말 이쁘다 ㅠㅠ https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box s..
